import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
import DocumentTable from '@/components/documents/DocumentTable';
import { getDocuments, deleteDocument } from '@/helpers/axios_helper';
import { Document } from '@/types/types';

const DocumentsClient = ({ clientId }: { clientId: number }) => {
  const [documents, setDocuments] = useState<Document[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [isPermanentFilter, setIsPermanentFilter] = useState<string>('false');
  const router = useRouter();

  useEffect(() => {
    const fetchDocuments = async () => {
      setLoading(true);
      try {
        const params: any = { clientId };
        if (isPermanentFilter && isPermanentFilter !== 'all') params.isPermanent = isPermanentFilter;
        const data = await getDocuments(params);
        setDocuments(data);
        setError('');
      } catch (err) {
        setError('Erreur lors du chargement des documents');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchDocuments();
  }, [clientId, isPermanentFilter]);

  const handleDelete = async (id: number) => {
    if (window.confirm('Êtes-vous sûr de vouloir supprimer ce document ?')) {
      try {
        await deleteDocument(id);
        setDocuments(documents.filter(doc => doc.id !== id));
        setError('');
      } catch (err) {
        setError('Erreur lors de la suppression du document');
        console.error(err);
      }
    }
  };

  const handleFilterChange = (value: string) => {
    setIsPermanentFilter(value);
  };

  // Filtrage strict côté interface pour garantir qu'on n'affiche que les documents du client sélectionné
  const filteredDocuments = documents.filter(doc => doc.clientId === clientId);

  if (loading) {
    return (
      <div className="p-6">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
          <div className="space-y-4">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="h-16 bg-gray-200 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      </div>
    );
  }

  if (filteredDocuments.length === 0) {
    return (
      <div className="p-6">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-semibold">Documents</h1>
          <div className="flex items-center space-x-4">
            <select
              value={isPermanentFilter}
              onChange={e => handleFilterChange(e.target.value)}
              className="border rounded px-2 py-1"
            >
              <option value="false">Non permanent</option>
              <option value="true">Permanent</option>
              <option value="all">Tous</option>
            </select>
            <Button onClick={() => router.push(`/admin/documents/new?clientId=${clientId}`)}>
              <Plus className="h-4 w-4 mr-2" />
              Nouveau Document
            </Button>
          </div>
        </div>
        <div className="text-gray-500 p-4">Aucun document à afficher.</div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-semibold">Documents</h1>
        <div className="flex items-center space-x-4">
          <select
            value={isPermanentFilter}
            onChange={e => handleFilterChange(e.target.value)}
            className="border rounded px-2 py-1"
          >
            <option value="false">Non permanent</option>
            <option value="true">Permanent</option>
            <option value="all">Tous</option>
          </select>
          <Button onClick={() => router.push(`/admin/documents/new?clientId=${clientId}`)}>
            <Plus className="h-4 w-4 mr-2" />
            Nouveau Document
          </Button>
        </div>
      </div>
      <DocumentTable documents={filteredDocuments} onDelete={handleDelete} onRefresh={() => {
        const fetchDocuments = async () => {
          setLoading(true);
          try {
            const params: any = { clientId };
            if (isPermanentFilter && isPermanentFilter !== 'all') params.isPermanent = isPermanentFilter;
            const data = await getDocuments(params);
            setDocuments(data);
            setError('');
          } catch (err) {
            setError('Erreur lors du chargement des documents');
            console.error(err);
          } finally {
            setLoading(false);
          }
        };
        fetchDocuments();
      }} />
    </div>
  );
};

export default DocumentsClient;