"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, LineChart, Line, CartesianGrid } from "recharts";

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#a83232', '#32a852', '#a83296'];

export default function ReportsPage() {
  const [data, setData] = useState<{ statusData: any[], refData: any[], dailyData: any[], references: string[] } | null>(null);
  const [statusFilter, setStatusFilter] = useState("");
  const [refFilter, setRefFilter] = useState("");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [session, setSession] = useState<any>(null);

  const router = useRouter();

  const fetchReports = useCallback(async () => {
    try {
      const params = new URLSearchParams();
      if (statusFilter) params.append("status", statusFilter);
      if (refFilter) params.append("reference", refFilter);
      if (startDate) params.append("start_date", startDate);
      if (endDate) params.append("end_date", endDate);

      const res = await fetch(`/api/reports?${params.toString()}`);
      if (res.ok) {
        const d = await res.json();
        setData(d);
      }
    } catch (err) {
      console.error(err);
    }
  }, [statusFilter, refFilter, startDate, endDate]);

  useEffect(() => {
    const init = async () => {
      const resMe = await fetch("/api/auth/me");
      if (resMe.ok) {
        const dataMe = await resMe.json();
        setSession(dataMe.user);
        if (dataMe.user.role === "sale") {
          router.push("/leads");
          return;
        }
        fetchReports();
      } else {
        router.push("/login");
      }
    };
    init();
  }, [router, fetchReports]);

  if (!session || !data) return <div>Yükleniyor...</div>;

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">Raporlar & Analiz</h1>

      <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-700 mb-6 flex flex-wrap gap-4 items-end">
        <div>
          <label className="block text-xs font-medium text-gray-500 mb-1">Durum</label>
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="border rounded-md px-3 py-1.5 text-sm dark:bg-gray-700 dark:border-gray-600">
            <option value="">Tümü</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ış Numara</option>
            <option value="tekrar_ara">Tekrar Ara</option>
            <option value="kara_liste">Kara Liste</option>
            <option value="yatirimci">Yatırımcı</option>
          </select>
        </div>

        <div>
           <label className="block text-xs font-medium text-gray-500 mb-1">Referans</label>
           <select value={refFilter} onChange={(e) => setRefFilter(e.target.value)} className="border rounded-md px-3 py-1.5 text-sm dark:bg-gray-700 dark:border-gray-600">
             <option value="">Tümü</option>
             {data.references.map(r => <option key={r} value={r}>{r}</option>)}
           </select>
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-500 mb-1">Başlangıç</label>
          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="border rounded-md px-3 py-1.5 text-sm dark:bg-gray-700 dark:border-gray-600" />
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-500 mb-1">Bitiş</label>
          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="border rounded-md px-3 py-1.5 text-sm dark:bg-gray-700 dark:border-gray-600" />
        </div>

        <button onClick={() => { setStatusFilter(""); setRefFilter(""); setStartDate(""); setEndDate(""); }} className="text-sm text-blue-600 hover:text-blue-800">Temizle</button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-700">
           <h2 className="text-lg font-bold mb-4">Statüs Dağılımı</h2>
           <div className="h-64">
             <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie data={data.statusData} cx="50%" cy="50%" outerRadius={80} dataKey="value" label={({name, value}) => `${name}: ${value}`}>
                    {data.statusData.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)}
                  </Pie>
                  <Tooltip />
                </PieChart>
             </ResponsiveContainer>
           </div>
        </div>

        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-700">
           <h2 className="text-lg font-bold mb-4">En Çok Gelen Kaynaklar (Referans)</h2>
           <div className="h-64">
             <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data.refData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Bar dataKey="value" fill="#8884d8" />
                </BarChart>
             </ResponsiveContainer>
           </div>
        </div>

        <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow border border-gray-200 dark:border-gray-700 lg:col-span-2">
           <h2 className="text-lg font-bold mb-4">Günlük İşlem Hacmi (Eklenen Notlar)</h2>
           <div className="h-64">
             <ResponsiveContainer width="100%" height="100%">
                <LineChart data={data.dailyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis />
                  <Tooltip />
                  <Line type="monotone" dataKey="actions" stroke="#82ca9d" name="İşlem" />
                </LineChart>
             </ResponsiveContainer>
           </div>
           <p className="text-xs text-gray-500 mt-2 text-center text-red-500">
             Not: Muhalefet incelemesine göre Sale performans (kişi bazlı) sıralama tablosu V1'de kasıtlı olarak çıkarılmıştır.
           </p>
        </div>
      </div>
    </div>
  );
}