'use client';

import React, { useEffect, useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { User, Users, FileText, ListTodo, CalendarClock, BookText, IdCard, Plus } from "lucide-react";
import { useSelectedClient } from "@/context/SelectedClientContext";
import { useRouter } from "next/navigation";
import IdentityPage from "@/app/admin/identity/page";
import { Document, Task } from "@/types/types";
import { getDocuments, getTasks } from "@/helpers/axios_helper";
import FactureTable from "@/components/facture/FactureTable";

const tabs = [
  { key: "client", label: "Client", icon: <User className="w-4 h-4 mr-2" /> },
  { key: "identity", label: "Identité", icon: <IdCard className="w-4 h-4 mr-2" /> },
  { key: "documents", label: "Documents", icon: <FileText className="w-4 h-4 mr-2" /> },
  { key: "invoices", label: "Factures", icon: <FileText className="w-4 h-4 mr-2" /> },
  { key: "tasks", label: "Tâches", icon: <ListTodo className="w-4 h-4 mr-2" /> },
  { key: "deadlines", label: "Échéances", icon: <CalendarClock className="w-4 h-4 mr-2" /> },
  { key: "journal", label: "Journal", icon: <BookText className="w-4 h-4 mr-2" /> },
  { key: "partners", label: "Partenaires", icon: <Users className="w-4 h-4 mr-2" /> },
];

export default function ClientTabsView() {
  const { selectedClient, setSelectedClient } = useSelectedClient();
  const [tab, setTab] = useState("client");
  const router = useRouter();

  // Local states for filtered lists
  const [docs, setDocs] = useState<Document[]>([]);
  const [tasks, setTasksState] = useState<Task[]>([]);
  const [partners, setPartners] = useState<Array<{ id: number; name: string; email?: string; phone?: string }>>([]);

  useEffect(() => {
    if (!selectedClient) return;
    // Documents filter by selected client
    getDocuments({ clientId: selectedClient.id, isPermanent: 'all' }).then(setDocs);
    // Tasks filter client-side
    getTasks().then((all) => {
      const filtered = all.filter((t: any) => String(t.clientId) === String(selectedClient.id));
      setTasksState(filtered as Task[]);
    });
    // Partners filtered by clientId via API
    fetch(`/api/partners?clientId=${selectedClient.id}`).then(res => res.json()).then(setPartners).catch(() => setPartners([]));
  }, [selectedClient]);
  
  if (!selectedClient) return null;

  const pushWithClient = (href: string) => {
    const url = href.includes('?') ? `${href}&clientId=${selectedClient.id}` : `${href}?clientId=${selectedClient.id}`;
    router.push(url);
  };

  const handleBackToDashboard = () => {
    setSelectedClient(null);
    router.push('/clients');
  };

  return (
    <div className="w-full">
      <Tabs value={tab} onValueChange={setTab} className="w-full">
        <TabsList className="flex w-full bg-yellow-400 rounded-none p-0 h-14 shadow-md">
          {tabs.map((t) => (
            <TabsTrigger
              key={t.key}
              value={t.key}
              className={
                "flex items-center gap-1 px-6 py-2 h-full text-base font-semibold text-yellow-900 data-[state=active]:bg-yellow-500 data-[state=active]:text-yellow-950 transition-all border-b-4 border-transparent data-[state=active]:border-yellow-700 rounded-none"
              }
            >
              {t.icon}
              {t.label}
            </TabsTrigger>
          ))}
        </TabsList>
        <div className="bg-white rounded-b-xl shadow p-6 min-h-[400px]">
          <TabsContent value="client">
            <div className="space-y-2">
              <div>
                <span className="font-semibold">Nom:</span>
                <span className="font-bold text-xl ml-2 animate-zoom-pulse">
                  {selectedClient.firstName} {selectedClient.lastName}
                </span>
              </div>
              <div><span className="font-semibold">Email:</span> {selectedClient.email || 'Non renseigné'}</div>
              <div><span className="font-semibold">Téléphone:</span> {selectedClient.mobilePhone || 'Non renseigné'}</div>
              <div><span className="font-semibold">Statut:</span> {selectedClient.status || 'Non renseigné'}</div>
            </div>
          </TabsContent>

          <TabsContent value="identity">
            <div className="flex justify-end mb-4">
              <button onClick={() => pushWithClient('/admin/identity')}
                className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                <Plus className="w-4 h-4 mr-1" /> Modifier Identité
              </button>
            </div>
            <IdentityPage />
          </TabsContent>

          <TabsContent value="documents">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">Documents du client</h3>
              <button onClick={() => pushWithClient('/admin/documents/new')}
                className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                <Plus className="w-4 h-4 mr-1" /> Nouveau document
              </button>
            </div>
            {docs.length === 0 ? (
              <div className="text-gray-500">Aucun document pour ce client.</div>
            ) : (
              <ul className="space-y-2">
                {docs.map((d) => (
                  <li key={d.id} className="flex items-center justify-between border-b py-2">
                    <span>{d.name}</span>
                    <span className="text-xs text-gray-400">{new Date(d.uploadDate).toLocaleDateString()}</span>
                  </li>
                ))}
              </ul>
            )}
          </TabsContent>

          <TabsContent value="invoices">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">Factures du client</h3>
              <div className="flex gap-2">
                <button onClick={() => pushWithClient('/factures/soin/new')}
                  className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                  <Plus className="w-4 h-4 mr-1" /> Nouvelle facture de soin
                </button>
                <button onClick={() => pushWithClient('/factures/autre/new')}
                  className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                  <Plus className="w-4 h-4 mr-1" /> Nouvelle autre facture
                </button>
              </div>
            </div>
            <FactureTable clientId={selectedClient.id} />
          </TabsContent>

          <TabsContent value="tasks">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">Tâches du client</h3>
              <button onClick={() => pushWithClient('/admin/tasks/new')}
                className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                <Plus className="w-4 h-4 mr-1" /> Nouvelle tâche
              </button>
            </div>
            {tasks.length === 0 ? (
              <div className="text-gray-500">Aucune tâche pour ce client.</div>
            ) : (
              <ul className="space-y-2">
                {tasks.map((t) => (
                  <li key={t.id} className="flex items-center justify-between border-b py-2">
                    <span>{t.title}</span>
                    <span className="text-xs text-gray-400">{t.status}</span>
                  </li>
                ))}
              </ul>
            )}
          </TabsContent>

          <TabsContent value="deadlines">
            <div className="text-gray-500">À venir : Échéances du client</div>
          </TabsContent>

          <TabsContent value="journal">
            <div className="text-gray-500">À venir : Journal du client</div>
          </TabsContent>

          <TabsContent value="partners">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">Partenaires du client</h3>
              <button onClick={() => pushWithClient('/partners/new?returnTo=/clients')}
                className="inline-flex items-center bg-blue-600 text-white px-3 py-2 rounded hover:bg-blue-700 transition">
                <Plus className="w-4 h-4 mr-1" /> Nouveau partenaire
              </button>
            </div>
            {partners.length === 0 ? (
              <div className="text-gray-500">Aucun partenaire pour ce client.</div>
            ) : (
              <ul className="space-y-2">
                {partners.map((p) => (
                  <li key={p.id} className="flex items-center justify-between border-b py-2">
                    <span>{p.name}</span>
                    <span className="text-xs text-gray-400">{p.email || p.phone || ''}</span>
                  </li>
                ))}
              </ul>
            )}
          </TabsContent>
        </div>
      </Tabs>
      <div className="mt-4 flex justify-end">
        <button
          onClick={handleBackToDashboard}
          className="px-4 py-2 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200 transition"
        >
          Retour au dashboard
        </button>
      </div>
    </div>
  );
}