'use client';

import { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { format } from 'date-fns';
import { tr } from 'date-fns/locale';
import { CreateLeaveRequestSchema } from '@kres/validators';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { Loader2, X } from 'lucide-react';

interface LeaveRequestFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
}

export default function LeaveRequestForm({ onSuccess, onCancel }: LeaveRequestFormProps) {
  const { toast } = useToast();
  const [submitting, setSubmitting] = useState(false);

  const {
    control, handleSubmit, formState: { errors }, reset,
  } = useForm({
    resolver: zodResolver(CreateLeaveRequestSchema),
    defaultValues: {
      startDate: format(new Date(), 'yyyy-MM-dd'),
      endDate: format(new Date(), 'yyyy-MM-dd'),
      reason: '',
    },
  });

  const onSubmit = async (data: any) => {
    setSubmitting(true);
    const res = await apiFetchJson('/v1/teacher/leave-requests', {
      method: 'POST',
      body: JSON.stringify(data),
    });
    setSubmitting(false);

    if (res.error) {
      toast({ title: 'Hata', description: res.error, variant: 'destructive' });
      return;
    }

    toast({ title: 'Başarılı', description: 'İzin talebiniz başarıyla gönderildi' });
    reset();
    onSuccess?.();
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white">Yeni İzin Talebi</h3>
        <button
          type="button"
          onClick={onCancel}
          className="rounded-lg p-1 text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
        >
          <X className="h-5 w-5" />
        </button>
      </div>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        {/* Başlangıç Tarihi */}
        <div>
          <label htmlFor="startDate" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
            Başlangıç Tarihi
          </label>
          <Controller
            control={control}
            name="startDate"
            render={({ field }) => (
              <input
                {...field}
                type="date"
                className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3.5 py-2.5 text-sm text-zinc-900 placeholder-zinc-400 transition focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-500"
              />
            )}
          />
          {errors.startDate && <p className="mt-1 text-xs text-red-500">{errors.startDate.message}</p>}
        </div>

        {/* Bitiş Tarihi */}
        <div>
          <label htmlFor="endDate" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
            Bitiş Tarihi
          </label>
          <Controller
            control={control}
            name="endDate"
            render={({ field }) => (
              <input
                {...field}
                type="date"
                className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3.5 py-2.5 text-sm text-zinc-900 placeholder-zinc-400 transition focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-500"
              />
            )}
          />
          {errors.endDate && <p className="mt-1 text-xs text-red-500">{errors.endDate.message}</p>}
        </div>

        {/* İzin Sebebi */}
        <div>
          <label htmlFor="reason" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300">
            İzin Sebebi (opsiyonel)
          </label>
          <Controller
            control={control}
            name="reason"
            render={({ field }) => (
              <textarea
                {...field}
                placeholder="İzin nedeninizi belirtiniz..."
                rows={3}
                className="mt-1.5 block w-full rounded-lg border border-zinc-200 bg-white px-3.5 py-2.5 text-sm text-zinc-900 placeholder-zinc-400 transition focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-500"
              />
            )}
          />
          {errors.reason && <p className="mt-1 text-xs text-red-500">{errors.reason.message}</p>}
        </div>

        {/* Butonlar */}
        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={submitting}
            className="flex-1 rounded-lg bg-teal-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500/50 disabled:opacity-60 dark:bg-teal-700 dark:hover:bg-teal-600"
          >
            {submitting ? (
              <div className="flex items-center justify-center gap-2">
                <Loader2 className="h-4 w-4 animate-spin" />
                Gönderiliyor...
              </div>
            ) : (
              'İzin Talebi Gönder'
            )}
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="rounded-lg border border-zinc-200 px-4 py-2.5 text-sm font-semibold text-zinc-700 transition hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
          >
            İptal
          </button>
        </div>
      </form>
    </div>
  );
}