"use client";

import { useState, useEffect, useCallback, Fragment } from "react";
import Link from "next/link";
import { format } from "date-fns";
import { useRouter } from "next/navigation";

export default function LeadsPage() {
  const [session, setSession] = useState<any>(null);
  const [leads, setLeads] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState<any[]>([]);
  
  const [statusFilter, setStatusFilter] = useState("");
  const [assignedFilter, setAssignedFilter] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(50);
  const [totalLeads, setTotalLeads] = useState(0);
  const [totalPages, setTotalPages] = useState(0);

  const [selectedLeads, setSelectedLeads] = useState<Set<number>>(new Set());
  const router = useRouter();

  const fetchLeads = useCallback(async () => {
    if (!session) return;
    setLoading(true);
    try {
      const q = new URLSearchParams({
        page: page.toString(),
        limit: limit.toString(),
        status: statusFilter,
        assigned_to: assignedFilter,
        search: searchQuery
      });
      const res = await fetch(`/api/leads?${q.toString()}`);
      if (!res.ok) throw new Error("API hatası");
      const data = await res.json();
      if (data.success) {
        setLeads(data.leads || []);
        setTotalLeads(data.pagination?.total || 0);
        setTotalPages(data.pagination?.totalPages || 0);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, [session, page, limit, statusFilter, assignedFilter, searchQuery]);

  useEffect(() => {
    const init = async () => {
      try {
        const res = await fetch("/api/auth/me");
        if (res.ok) {
          const d = await res.json();
          setSession(d.user);
          if (d.user.role !== "sale") {
            const resU = await fetch("/api/users");
            if (resU.ok) {
              const du = await resU.json();
              setUsers(du.users || []);
            }
          }
        } else {
          router.push("/login");
        }
      } catch (e) { console.error(e); }
    };
    init();
  }, [router]);

  useEffect(() => {
    fetchLeads();
  }, [fetchLeads]);

  const handleBulkAssign = async (uid: string) => {
    if (!selectedLeads.size) return;
    try {
      const res = await fetch("/api/leads/assign", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          leadIds: Array.from(selectedLeads),
          assignToId: uid === "none" ? null : parseInt(uid)
        })
      });
      if (res.ok) {
        setSelectedLeads(new Set());
        fetchLeads();
      }
    } catch (e) { console.error(e); }
  };

  if (!session) return <div className="p-10 text-center text-sm">Yükleniyor...</div>;

  const isSale = session.role === "sale";

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Leadiler</h1>
        {!isSale && (
          <Link href="/leads/upload" className="bg-green-600 text-white px-4 py-2 rounded text-sm font-bold shadow hover:bg-green-500 transition-colors">
            + Excel Yükle
          </Link>
        )}
      </div>

      <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-100 flex flex-wrap gap-4 items-end">
        <div className="flex-1 min-w-[200px]">
          <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Hızlı Arama</label>
          <input 
            type="text" 
            placeholder="İsim veya tel..." 
            className="w-full border rounded px-3 py-1.5 text-sm dark:bg-gray-700"
            value={searchQuery}
            onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
          />
        </div>
        <div className="w-40">
          <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Durum</label>
          <select 
            className="w-full border rounded px-3 py-1.5 text-sm dark:bg-gray-700"
            value={statusFilter}
            onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
          >
            <option value="">Tümü ({totalLeads})</option>
            <option value="yeni_atama">Yeni Atama</option>
            <option value="cevapsiz">Cevapsız</option>
            <option value="ilgili">İlgili</option>
            <option value="ilgisiz">İlgisiz</option>
            <option value="yanlis_numara">Yanlış No</option>
          </select>
        </div>
        {!isSale && (
          <div className="w-40">
            <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Atanan</label>
            <select 
              className="w-full border rounded px-3 py-1.5 text-sm dark:bg-gray-700"
              value={assignedFilter}
              onChange={(e) => { setAssignedFilter(e.target.value); setPage(1); }}
            >
              <option value="">Herkes</option>
              <option value="unassigned">Atanmamış</option>
              {users.map((u: any) => <option key={u.id} value={u.id}>{u.full_name}</option>)}
            </select>
          </div>
        )}
      </div>

      {!isSale && selectedLeads.size > 0 && (
        <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md flex items-center justify-between border border-blue-100 animate-in fade-in slide-in-from-top-2">
          <span className="text-sm font-bold text-blue-700">{selectedLeads.size} lead seçildi</span>
          <select 
            className="border rounded px-2 py-1 text-sm bg-white dark:bg-gray-700"
            onChange={(e) => handleBulkAssign(e.target.value)}
          >
            <option value="">Ata...</option>
            <option value="none">Atamayı Kaldır</option>
            {users.map((u: any) => <option key={u.id} value={u.id}>{u.full_name}</option>)}
          </select>
        </div>
      )}

      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-100 dark:divide-gray-700">
            <thead className="bg-gray-50/50 dark:bg-gray-900/50">
              <tr>
                {!isSale && <th className="px-4 py-3 w-10">
                  <input type="checkbox" className="rounded" onChange={(e) => {
                    if (e.target.checked) setSelectedLeads(new Set(leads.map(l => l.id)));
                    else setSelectedLeads(new Set());
                  }} />
                </th>}
                <th className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase">Lead Sahibi</th>
                <th className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase">Telefon</th>
                <th className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase">Durum</th>
                {!isSale && <th className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase">Atanan MT</th>}
                <th className="px-4 py-3 text-left text-[10px] font-bold text-gray-400 uppercase">Tarih</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
              {loading ? (
                <tr><td colSpan={10} className="px-4 py-20 text-center text-sm text-gray-400 italic">Veriler yükleniyor...</td></tr>
              ) : leads.map((l) => (
                <tr key={l.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                  {!isSale && (
                    <td className="px-4 py-3">
                      <input type="checkbox" checked={selectedLeads.has(l.id)} className="rounded" onChange={() => {
                        const s = new Set(selectedLeads);
                        if (s.has(l.id)) s.delete(l.id); else s.add(l.id);
                        setSelectedLeads(s);
                      }} />
                    </td>
                  )}
                  <td className="px-4 py-3 text-sm font-bold">
                    <Link href={`/leads/${l.id}`} className="text-blue-600 hover:underline">
                      {l.first_name} {l.last_name}
                    </Link>
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-600">{l.phone}</td>
                  <td className="px-4 py-3">
                    <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase border border-blue-100">
                      {l.status}
                    </span>
                  </td>
                  {!isSale && <td className="px-4 py-3 text-sm text-gray-500">{l.assigned_name || "-"}</td>}
                  <td className="px-4 py-3 text-[10px] text-gray-400">
                    {l.created_at ? format(new Date(l.created_at), "dd.MM.yy HH:mm") : "-"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {!loading && totalPages > 1 && (
        <div className="flex justify-between items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
          <div className="text-xs text-gray-400">Sayfa {page} / {totalPages}</div>
          <div className="flex gap-2">
            <button disabled={page <= 1} onClick={() => setPage(page - 1)} className="px-4 py-1.5 border rounded-lg text-xs font-bold disabled:opacity-20 hover:bg-gray-50 transition-colors">Geri</button>
            <button disabled={page >= totalPages} onClick={() => setPage(page + 1)} className="px-4 py-1.5 border rounded-lg text-xs font-bold disabled:opacity-20 hover:bg-gray-50 transition-colors">İleri</button>
          </div>
        </div>
      )}
    </div>
  );
}