"use client";

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

export default function LeadDetailPage({ params }: { params: { id: string } }) {
  const leadId = params.id;
  
  const [lead, setLead] = useState<any>(null);
  const [notes, setNotes] = useState<any[]>([]);
  const [session, setSession] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const [newNote, setNewNote] = useState("");
  const [status, setStatus] = useState("");
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
  const [isAddingNote, setIsAddingNote] = useState(false);

  const router = useRouter();

  const fetchData = useCallback(async () => {
    try {
      const resMe = await fetch("/api/auth/me");
      if (!resMe.ok) return router.push("/login");
      const dataMe = await resMe.json();
      setSession(dataMe.user);

      const res = await fetch(`/api/leads/${leadId}`);
      if (!res.ok) {
        if (res.status === 403 || res.status === 404) {
          setError("Lead bulunamadı veya yetkiniz yok.");
        } else {
          setError("Bir hata oluştu.");
        }
        setLoading(false);
        return;
      }
      
      const data = await res.json();
      setLead(data.lead);
      setStatus(data.lead.status);
      setNotes(data.notes || []);
    } catch (err) {
      setError("Bağlantı hatası");
    } finally {
      setLoading(false);
    }
  }, [leadId, router]);

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

  const handleAddNote = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newNote.trim()) return;

    setIsAddingNote(true);
    try {
      const res = await fetch(`/api/leads/${leadId}/note`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content: newNote }),
      });
      if (res.ok) {
        setNewNote("");
        fetchData(); // reload
      } else {
        const data = await res.json();
        alert(data.error || "Not eklenemedi");
      }
    } catch (err) {
      alert("Note eklenirken hata oluştu");
    } finally {
      setIsAddingNote(false);
    }
  };

  const handleStatusChange = async (newStatus: string) => {
    if (newStatus === status) return;
    
    setIsUpdatingStatus(true);
    try {
      const res = await fetch(`/api/leads/${leadId}/status`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      });
      
      if (res.ok) {
        setStatus(newStatus);
        fetchData();
      } else {
        const data = await res.json();
        alert(data.error || "Status güncellenemedi");
        setStatus(lead.status); // revert
      }
    } catch (err) {
      alert("Hata oluştu");
      setStatus(lead.status);
    } finally {
      setIsUpdatingStatus(false);
    }
  };

  if (loading) return <div>Yükleniyor...</div>;
  if (error) return <div className="text-red-500 font-medium">{error}</div>;
  if (!lead) return null;

  const isAdmin = session?.role === "admin";
  const isKaraListe = lead.status === "kara_liste";
  const disableStatusChange = isKaraListe && !isAdmin;

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-4">
        <Link href="/leads" className="text-blue-600 hover:underline text-sm font-medium">
          &larr; Leadlere Dön
        </Link>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
          <div className="flex justify-between items-start">
            <div>
              <h1 className="text-2xl font-bold">{lead.first_name} {lead.last_name}</h1>
              <p className="text-gray-500 dark:text-gray-400 mt-1">İletişim: <span className="font-medium text-gray-900 dark:text-gray-200">{lead.phone}</span></p>
              {lead.email && <p className="text-gray-500 dark:text-gray-400">E-posta: {lead.email}</p>}
              <p className="text-gray-500 dark:text-gray-400">Referans: {lead.reference_source || 'Belirtilmedi'}</p>
            </div>

            <div className="text-right">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Durum</label>
              <select 
                className="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
                value={status}
                onChange={(e) => handleStatusChange(e.target.value)}
                disabled={isUpdatingStatus || disableStatusChange}
              >
                <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>
              {disableStatusChange && (
                <p className="text-xs text-red-500 mt-1 max-w-[150px]">Kara listedeki müşteriyi sadece admin güncelleyebilir.</p>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <h2 className="text-lg font-bold mb-4">Not Ekle</h2>
          <form onSubmit={handleAddNote} className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
            <textarea
              className="w-full border rounded-md p-3 text-sm focus:ring-1 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              rows={4}
              placeholder="Görüşme detaylarını buraya yazın..."
              value={newNote}
              onChange={(e) => setNewNote(e.target.value)}
              required
            ></textarea>
            <div className="mt-3 flex justify-end">
              <button
                type="submit"
                disabled={isAddingNote || !newNote.trim()}
                className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-md text-sm font-medium disabled:opacity-50"
              >
                {isAddingNote ? "Ekleniyor..." : "Notu Kaydet"}
              </button>
            </div>
          </form>
        </div>

        <div>
          <h2 className="text-lg font-bold mb-4">Geçmiş Notlar</h2>
          <div className="space-y-4">
            {notes.length === 0 ? (
              <p className="text-gray-500 dark:text-gray-400 text-sm">Henüz not eklenmemiş.</p>
            ) : (
              notes.map((note) => (
                <div key={note.id} className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                  <p className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap">{note.content}</p>
                  <div className="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 flex justify-between items-center text-xs text-gray-500">
                    <span className="font-medium">{note.user_name}</span>
                    <span>{format(new Date(note.created_at), "dd.MM.yyyy HH:mm")}</span>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}