'use client';

import { useEffect, useState } from 'react';
import { format, parseISO } from 'date-fns';
import { tr } from 'date-fns/locale';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import {
  Calendar, Filter, Loader2, CheckCircle2, XCircle, AlertCircle,
} from 'lucide-react';
import RejectDialog from './_components/reject-dialog';

interface LeaveRequest {
  id: string;
  user: {
    id: string;
    fullName: string;
    email: string;
    photoUrl?: string;
  };
  startDate: string;
  endDate: string;
  reason?: string;
  status: 'PENDING' | 'APPROVED' | 'REJECTED';
  rejectionReason?: string;
  approvedAt?: string;
}

export default function SchoolLeaveRequestsPage() {
  const { toast } = useToast();

  const [requests, setRequests] = useState<LeaveRequest[]>([]);
  const [loading, setLoading] = useState(false);
  const [statusFilter, setStatusFilter] = useState<'ALL' | 'PENDING' | 'APPROVED' | 'REJECTED'>('ALL');
  const [rejectingId, setRejectingId] = useState<string | null>(null);
  const [approvingId, setApprovingId] = useState<string | null>(null);
  const [rejectDialog, setRejectDialog] = useState<{ open: boolean; id: string | null }>({ open: false, id: null });

  const fetchRequests = async () => {
    setLoading(true);
    const params = new URLSearchParams();
    if (statusFilter !== 'ALL') {
      params.append('status', statusFilter);
    }

    const res = await apiFetchJson<any>(`/v1/school/leave-requests?${params.toString()}`);
    setLoading(false);

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

    setRequests(res.data || []);
  };

  useEffect(() => {
    fetchRequests();
  }, [statusFilter]);

  const handleApprove = async (id: string) => {
    setApprovingId(id);
    const res = await apiFetchJson(`/v1/school/leave-requests/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: 'APPROVED' }),
    });
    setApprovingId(null);

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

    toast({ title: 'Başarılı', description: 'İzin talebi onaylandı' });
    fetchRequests();
  };

  const handleReject = async (reason: string) => {
    if (!rejectDialog.id) return;

    setRejectingId(rejectDialog.id);
    const res = await apiFetchJson(`/v1/school/leave-requests/${rejectDialog.id}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: 'REJECTED', rejectionReason: reason }),
    });
    setRejectingId(null);

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

    toast({ title: 'Başarılı', description: 'İzin talebi reddedildi' });
    setRejectDialog({ open: false, id: null });
    fetchRequests();
  };

  const stats = {
    total: requests.length,
    pending: requests.filter((r) => r.status === 'PENDING').length,
    approved: requests.filter((r) => r.status === 'APPROVED').length,
    rejected: requests.filter((r) => r.status === 'REJECTED').length,
  };

  const filteredRequests = requests.filter((r) => {
    if (statusFilter === 'ALL') return true;
    return r.status === statusFilter;
  });

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'PENDING':
        return {
          bg: 'bg-amber-100 dark:bg-amber-900/40',
          text: 'text-amber-800 dark:text-amber-400',
          icon: AlertCircle,
          label: 'Beklemede',
        };
      case 'APPROVED':
        return {
          bg: 'bg-emerald-100 dark:bg-emerald-900/40',
          text: 'text-emerald-800 dark:text-emerald-400',
          icon: CheckCircle2,
          label: 'Onaylandı',
        };
      case 'REJECTED':
        return {
          bg: 'bg-red-100 dark:bg-red-900/40',
          text: 'text-red-800 dark:text-red-400',
          icon: XCircle,
          label: 'Reddedildi',
        };
      default:
        return { bg: '', text: '', icon: AlertCircle, label: '' };
    }
  };

  return (
    <div className="font-urbanist space-y-5">
      {/* Header */}
      <div className="rounded-2xl border border-slate-200 bg-gradient-to-r from-[#f8fafc] to-[#eef2ff] p-6 dark:border-slate-700 dark:from-slate-900 dark:to-slate-800">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-teal-600 dark:text-teal-400">
          Okul Yönetimi
        </p>
        <h1 className="mt-2 text-2xl font-bold text-slate-900 dark:text-white">İzin Talepleri</h1>
        <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
          Öğretmen izin taleplerini yönetin
        </p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 sm:grid-cols-4">
        {[
          { label: 'Toplam', value: stats.total, color: 'bg-zinc-50 dark:bg-zinc-900' },
          { label: 'Beklemede', value: stats.pending, color: 'bg-amber-50 dark:bg-amber-950/40' },
          { label: 'Onaylandı', value: stats.approved, color: 'bg-emerald-50 dark:bg-emerald-950/40' },
          { label: 'Reddedildi', value: stats.rejected, color: 'bg-red-50 dark:bg-red-950/40' },
        ].map((stat) => (
          <div key={stat.label} className={`rounded-xl border border-slate-200 ${stat.color} p-4 dark:border-slate-700`}>
            <p className="text-xs font-medium text-slate-600 dark:text-slate-400">{stat.label}</p>
            <p className="mt-2 text-2xl font-bold text-slate-900 dark:text-white">{stat.value}</p>
          </div>
        ))}
      </div>

      {/* Filter */}
      <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900/40">
        <div className="flex items-center gap-2">
          <Filter className="h-4 w-4 text-slate-400" />
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value as any)}
            className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-white"
          >
            <option value="ALL">Tümü</option>
            <option value="PENDING">Beklemede</option>
            <option value="APPROVED">Onaylandı</option>
            <option value="REJECTED">Reddedildi</option>
          </select>
        </div>
      </div>

      {/* Table */}
      {loading ? (
        <div className="flex items-center justify-center gap-2 py-20 text-slate-400">
          <Loader2 className="h-5 w-5 animate-spin" />
          Yükleniyor...
        </div>
      ) : filteredRequests.length === 0 ? (
        <div className="rounded-xl border border-dashed border-slate-200 py-20 text-center dark:border-slate-700">
          <Calendar className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-600" />
          <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
            İzin talebi bulunamadı
          </p>
        </div>
      ) : (
        <div className="overflow-hidden rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/40">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-slate-200 dark:border-slate-700">
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Öğretmen</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Tarih Aralığı</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Sebep</th>
                  <th className="px-5 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-400">Durum</th>
                  <th className="px-5 py-3 text-center text-xs font-semibold text-slate-600 dark:text-slate-400">İşlemler</th>
                </tr>
              </thead>
              <tbody>
                {filteredRequests.map((request) => {
                  const statusBadge = getStatusBadge(request.status);
                  const StatusIcon = statusBadge.icon;

                  return (
                    <tr key={request.id} className="border-b border-slate-200 transition last:border-0 hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800/50">
                      <td className="px-5 py-4">
                        <div className="flex items-center gap-3">
                          {request.user.photoUrl && (
                            <img
                              src={request.user.photoUrl}
                              alt={request.user.fullName}
                              className="h-8 w-8 rounded-full object-cover"
                            />
                          )}
                          <div>
                            <p className="text-sm font-medium text-slate-900 dark:text-white">{request.user.fullName}</p>
                            <p className="text-xs text-slate-500 dark:text-slate-400">{request.user.email}</p>
                          </div>
                        </div>
                      </td>
                      <td className="px-5 py-4">
                        <p className="text-sm text-slate-900 dark:text-white">
                          {format(parseISO(request.startDate), 'd MMM', { locale: tr })}
                          {' — '}
                          {format(parseISO(request.endDate), 'd MMM yyyy', { locale: tr })}
                        </p>
                      </td>
                      <td className="px-5 py-4">
                        <p className="max-w-xs truncate text-sm text-slate-600 dark:text-slate-400">
                          {request.reason || '—'}
                        </p>
                      </td>
                      <td className="px-5 py-4">
                        <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ${statusBadge.bg} ${statusBadge.text}`}>
                          <StatusIcon className="h-3.5 w-3.5" />
                          {statusBadge.label}
                        </span>
                      </td>
                      <td className="px-5 py-4">
                        {request.status === 'PENDING' && (
                          <div className="flex justify-center gap-2">
                            <button
                              onClick={() => handleApprove(request.id)}
                              disabled={approvingId === request.id}
                              className="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-700 disabled:opacity-60 dark:bg-emerald-700 dark:hover:bg-emerald-600"
                            >
                              {approvingId === request.id ? (
                                <Loader2 className="h-3 w-3 animate-spin" />
                              ) : (
                                'Onayla'
                              )}
                            </button>
                            <button
                              onClick={() => setRejectDialog({ open: true, id: request.id })}
                              className="rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600"
                            >
                              Reddet
                            </button>
                          </div>
                        )}
                        {request.status === 'APPROVED' && (
                          <p className="text-center text-xs text-emerald-600 dark:text-emerald-400">Onaylandı</p>
                        )}
                        {request.status === 'REJECTED' && (
                          <p className="text-center text-xs text-red-600 dark:text-red-400">Reddedildi</p>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Reject Dialog */}
      <RejectDialog
        open={rejectDialog.open}
        onOpenChange={(open) => setRejectDialog({ ...rejectDialog, open })}
        onConfirm={handleReject}
        loading={rejectingId === rejectDialog.id}
      />
    </div>
  );
}