'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, Mail, CheckCircle2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { AuthShell } from '@/components/auth/AuthShell';
import { useLanguage } from '@/contexts/LanguageContext';

export default function ForgotPasswordPage() {
  const { t } = useLanguage();
  const [identifier, setIdentifier] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Placeholder until reset API is wired — show success UX either way for security
    await new Promise((resolve) => setTimeout(resolve, 800));
    setSent(true);
    setLoading(false);
  };

  return (
    <AuthShell
      title={t('Reset password', 'I-reset ang password')}
      subtitle={t(
        "We'll send instructions to recover your account",
        'Papadalhan ka namin ng instructions para ma-recover ang account'
      )}
    >
      {sent ? (
        <div className="text-center py-2">
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center bg-amber-50">
            <CheckCircle2 className="h-7 w-7 text-[var(--home-amber)]" />
          </div>
          <h2 className="home-display text-lg font-bold text-slate-900">
            {t('Check your inbox', 'Tingnan ang inbox mo')}
          </h2>
          <p className="text-sm text-muted mt-2 leading-relaxed">
            {t('If an account exists for', 'Kung may account para sa')}{' '}
            <span className="font-semibold text-slate-700">{identifier}</span>
            {t(
              ", you'll receive reset instructions shortly.",
              ', makakatanggap ka ng reset instructions sa ilang sandali.'
            )}
          </p>
          <p className="text-xs text-muted mt-3">
            {t(
              "Didn't get it? Check spam or try again with a different email or phone number.",
              'Hindi natanggap? Tingnan ang spam o subukan ulit gamit ang ibang email o numero.'
            )}
          </p>
          <Button
            type="button"
            variant="outline"
            className="w-full mt-6 rounded-none border-[#d6d0c4]"
            onClick={() => {
              setSent(false);
              setIdentifier('');
            }}
          >
            {t('Try another email or phone', 'Subukan ang ibang email o numero')}
          </Button>
        </div>
      ) : (
        <>
          <div className="mb-5 border border-[#e2ddd2] bg-[var(--home-sand)] px-4 py-3 flex gap-3">
            <Mail className="h-5 w-5 text-[var(--home-amber)] shrink-0 mt-0.5" />
            <p className="text-sm text-slate-600 leading-relaxed">
              {t(
                'Enter the email or phone number linked to your eHandyHire account.',
                'Ilagay ang email o numero na naka-link sa iyong eHandyHire account.'
              )}
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-4">
            <Input
              label={t('Email or Phone', 'Email o Cellphone')}
              type="text"
              placeholder="your@email.com or +639..."
              value={identifier}
              onChange={(e) => setIdentifier(e.target.value)}
              required
            />
            <Button
              type="submit"
              className="auth-submit rounded-none"
              disabled={loading || !identifier.trim()}
            >
              {loading
                ? t('Sending...', 'Ipinapadala...')
                : t('Send Reset Link', 'Ipadala ang Reset Link')}
            </Button>
          </form>
        </>
      )}

      <div className="mt-6 pt-4 border-t border-border text-center">
        <Link
          href="/login"
          className="inline-flex items-center gap-1.5 text-sm auth-link"
        >
          <ArrowLeft className="h-4 w-4" />
          {t('Back to sign in', 'Bumalik sa sign in')}
        </Link>
      </div>
    </AuthShell>
  );
}