'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { motion } from 'framer-motion';
import { ArrowLeft, Loader2, Mail } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { authApi } from '@/services/api/auth';
import Link from 'next/link';

const forgotSchema = z.object({
  email: z.string().email('Email tidak valid'),
});

type ForgotForm = z.infer<typeof forgotSchema>;

export default function ForgotPasswordPage() {
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ForgotForm>({
    resolver: zodResolver(forgotSchema),
  });

  const onSubmit = async (data: ForgotForm) => {
    try {
      setIsLoading(true);
      await authApi.forgotPassword(data);
      setIsSuccess(true);
      toast.success('Link reset password telah dikirim ke email Anda');
    } catch {
      toast.error('Email tidak ditemukan');
    } finally {
      setIsLoading(false);
    }
  };

  if (isSuccess) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
      >
        <Card className="border-border/50 shadow-xl shadow-primary/5">
          <CardContent className="pt-6 text-center">
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-success/10">
              <Mail className="h-8 w-8 text-success" />
            </div>
            <h2 className="font-heading text-lg font-semibold">Email Terkirim</h2>
            <p className="mt-2 text-sm text-muted-foreground">
              Kami telah mengirim link reset password ke email Anda. Silakan periksa inbox atau folder spam.
            </p>
            <Button asChild className="mt-6 w-full rounded-xl" variant="outline">
              <Link href="/login">Kembali ke Login</Link>
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  return (
    <>
      <title>Lupa Password | Nadhom Smart</title>
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.4 }}
      >
        <Card className="border-border/50 shadow-xl shadow-primary/5">
          <CardContent className="pt-6">
            <div className="mb-4">
              <h2 className="font-heading text-lg font-semibold">Lupa Password</h2>
              <p className="text-sm text-muted-foreground mt-1">
                Masukkan email untuk menerima link reset password
              </p>
            </div>

            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="nama@email.com"
                  className="rounded-xl"
                  {...register('email')}
                  aria-invalid={!!errors.email}
                />
                {errors.email && (
                  <p className="text-xs text-destructive">{errors.email.message}</p>
                )}
              </div>

              <Button
                type="submit"
                className="w-full rounded-xl h-11 font-semibold gradient-primary border-0 text-white"
                disabled={isLoading}
              >
                {isLoading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Mengirim...
                  </>
                ) : (
                  'Kirim Link Reset'
                )}
              </Button>
            </form>

            <div className="mt-4 text-center">
              <Link
                href="/login"
                className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
              >
                <ArrowLeft className="h-3.5 w-3.5" />
                Kembali ke Login
              </Link>
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </>
  );
}