'use client';

import { useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { Calendar, Plus, Filter, Loader2 } from 'lucide-react';
import LeaveRequestCard from './_components/leave-request-card';
import LeaveRequestForm from './_components/leave-request-form';

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

type TabType = 'list' | 'create';

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

  const [tab, setTab] = useState<TabType>('list');
  const [requests, setRequests] = useState<LeaveRequest[]>([]);
  const [loading, setLoading] = useState(false);
  const [statusFilter, setStatusFilter] = useState<'ALL' | 'PENDING' | 'APPROVED' | 'REJECTED'>('ALL');

  // İzin taleplerini yükle
  const fetchRequests = async () => {
    setLoading(true);
    const params = new URLSearchParams();
    if (statusFilter !== 'ALL') {
      params.append('status', statusFilter);
    }

    const res = await apiFetchJson<any>(`/v1/teacher/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 filteredRequests = requests.filter((r) => {
    if (statusFilter === 'ALL') return true;
    return r.status === statusFilter;
  });

  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,
  };

  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">
          Personel Paneli
        </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">
          İzin taleplerini yönetin ve durumlarını takip edin
        </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>

      {/* Tabs */}
      <div className="border-b border-slate-200 dark:border-slate-700">
        <div className="flex gap-1">
          <button
            onClick={() => setTab('list')}
            className={`px-4 py-3 text-sm font-semibold transition ${
              tab === 'list'
                ? 'border-b-2 border-teal-600 text-teal-600 dark:border-teal-400 dark:text-teal-400'
                : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
            }`}
          >
            <div className="flex items-center gap-2">
              <Calendar className="h-4 w-4" />
              Taleplerim ({stats.total})
            </div>
          </button>
          <button
            onClick={() => setTab('create')}
            className={`px-4 py-3 text-sm font-semibold transition ${
              tab === 'create'
                ? 'border-b-2 border-teal-600 text-teal-600 dark:border-teal-400 dark:text-teal-400'
                : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-200'
            }`}
          >
            <div className="flex items-center gap-2">
              <Plus className="h-4 w-4" />
              Yeni Talep
            </div>
          </button>
        </div>
      </div>

      {/* Content */}
      {tab === 'list' ? (
        <div className="space-y-4">
          {/* 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>

          {/* List */}
          {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">
                {statusFilter === 'ALL' ? 'Henüz izin talebi yok' : `${statusFilter} durumunda istek bulunamadı`}
              </p>
              {statusFilter === 'ALL' && (
                <button
                  onClick={() => setTab('create')}
                  className="mt-4 inline-block rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-600"
                >
                  Yeni Talep Oluştur
                </button>
              )}
            </div>
          ) : (
            <div className="space-y-3">
              {filteredRequests.map((request) => (
                <LeaveRequestCard key={request.id} {...request} />
              ))}
            </div>
          )}
        </div>
      ) : (
        <div className="rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-900/40">
          <LeaveRequestForm
            onSuccess={() => {
              setTab('list');
              fetchRequests();
            }}
            onCancel={() => setTab('list')}
          />
        </div>
      )}
    </div>
  );
}