"use client"

import { useState, useMemo, useCallback } from "react" // <-- useCallback ajouté
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Skeleton } from "@/components/ui/skeleton"
import { MessageSquare } from "lucide-react"
import {
  Folder,
  Search,
  FolderPlus,
  Clock,
  StickyNote,
  FileText,
  UploadCloud,
  X // <-- Ajout de X pour la notification
} from "lucide-react"
import { FolderData, FolderCreated, FolderPrivateFields, setDefaultFolderRoles } from "@/lib/4nk/models/FolderData"
import MessageBus from "@/lib/4nk/MessageBus"
import { iframeUrl } from "@/app/page"
import FolderModal from "@/components/4nk/FolderModal"
import FolderChat from "@/components/4nk/FolderChat"
import { use4NK, EnrichedFolderData } from "@/lib/contexts/FourNKContext"

// Fonction simple pour formater la taille des fichiers
const formatBytes = (bytes: number, decimals = 2) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

type FolderType = 'contrat' | 'projet' | 'rapport' | 'finance' | 'rh' | 'marketing' | 'autre';

function DashboardLoadingSkeleton() {
  return (
    <div className="flex h-full text-gray-100 p-6 space-x-6">
      {/* Colonne 1: Squelette Liste */}
      <div className="w-80 flex-shrink-0 flex flex-col h-full">
        <div className="flex-shrink-0">
          <div className="flex items-center justify-between mb-4">
            <Skeleton className="h-7 w-32 bg-gray-700" />
            <Skeleton className="h-8 w-8 bg-gray-700" />
          </div>
          <div className="relative mb-4">
            <Skeleton className="h-10 w-full bg-gray-700" />
          </div>
        </div>
        <div className="flex-1 overflow-y-auto -mr-3 pr-3">
          <div className="space-y-2">
            {[...Array(8)].map((_, i) => (
              <Card key={i} className="bg-gray-800 border-gray-700">
                <CardContent className="p-3">
                  <div className="flex items-center space-x-3 animate-pulse">
                    <Skeleton className="h-5 w-5 bg-gray-700" />
                    <div className="min-w-0">
                      <Skeleton className="h-4 w-32 bg-gray-700" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Colonne 2: Squelette Résumé */}
      <div className="w-[600px] flex-shrink-0 flex flex-col h-full overflow-y-auto">
        <div className="flex h-full items-center justify-center">
          <p className="text-gray-500 animate-pulse">Chargement des données...</p>
        </div>
      </div>

      {/* Colonne 3: Squelette Chat */}
      <div className="flex-1 bg-gray-800 border border-gray-700 rounded-lg flex flex-col overflow-hidden h-full">
        <div className="flex h-full items-center justify-center text-gray-500 p-6">
          <div className="text-center animate-pulse">
            <MessageSquare className="h-12 w-12 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-100 mb-2">
              Chargement du chat...
            </h3>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function DashboardPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [folderType, setFolderType] = useState<FolderType | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [notification, setNotification] = useState<{ type: "success" | "error" | "info"; message: string } | null>(null)

  const [selectedFolder, setSelectedFolder] = useState<EnrichedFolderData | null>(null);

  const {
    isConnected,
    userPairingId,
    folders,
    loadingFolders,
    setFolderProcesses,
    setMyFolderProcesses,
    setFolderPrivateData
  } = use4NK();

  const filteredFolders = folders.filter(folder => {
    const matchesSearch = folder.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      folder.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
      folder.folderNumber.toLowerCase().includes(searchTerm.toLowerCase()) // On garde la recherche par ID
    return matchesSearch
  })

  const showNotification = (type: "success" | "error" | "info", message: string) => {
    setNotification({ type, message })
    setTimeout(() => setNotification(null), 5000)
  }

  const handleOpenModal = (type: FolderType) => {
    setFolderType(type);
    setIsModalOpen(true);
  };
  const handleCloseModal = () => {
    setIsModalOpen(false);
    setFolderType(null);
  };

  const handleSaveNewFolder = useCallback(
    (folderData: FolderData) => {
      if (!isConnected || !userPairingId) {
        showNotification("error", "Vous devez être connecté à 4NK pour créer un dossier");
        return;
      }
      const roles = setDefaultFolderRoles(userPairingId);
      const folderPrivateFields = FolderPrivateFields;
      MessageBus.getInstance(iframeUrl)
        .createFolder(folderData, folderPrivateFields, roles)
        .then((_folderCreated: FolderCreated) => {
          const firstStateId = _folderCreated.process.states[0].state_id;
          MessageBus.getInstance(iframeUrl)
            .notifyProcessUpdate(_folderCreated.processId, firstStateId)
            .then(() => {
              const { processId, process } = _folderCreated;

              setFolderProcesses((prevProcesses: any) => ({ ...prevProcesses, [processId]: process }));
              setMyFolderProcesses((prevMyProcesses: string[]) => {
                if (prevMyProcesses.includes(processId)) return prevMyProcesses;
                return [...prevMyProcesses, processId];
              });
              setFolderPrivateData((prevData) => ({ ...prevData, [firstStateId]: folderData }));

              showNotification("success", "Dossier créé avec succès !");
              handleCloseModal();
            });
        })
        .catch((error: any) => {
          console.error('Erreur lors de la création du dossier:', error);
          showNotification("error", "Erreur lors de la création du dossier");
        });
    },
    [isConnected, userPairingId, setFolderProcesses, setMyFolderProcesses, setFolderPrivateData]
  );

  if (loadingFolders) {
    return <DashboardLoadingSkeleton />;
  }

  return (
    <div className="flex h-full text-gray-100 p-6 space-x-6">

      {/* --- COLONNE 1: LISTE DES DOSSIERS (Largeur fixe) --- */}
      <div className="w-80 flex-shrink-0 flex flex-col h-full">
        {/* Header Colonne 1 */}
        <div className="flex-shrink-0">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold text-gray-100">Dossiers</h2>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => handleOpenModal("autre")}
              disabled={!isConnected}
              className="text-gray-400 hover:text-gray-100 hover:bg-gray-700"
            >
              <FolderPlus className="h-4 w-4" />
            </Button>
          </div>
          <div className="relative mb-4">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Rechercher..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 bg-gray-800 border-gray-700"
            />
          </div>
        </div>

        {/* Liste scrollable */}
        <div className="flex-1 overflow-y-auto -mr-3 pr-3">
          {loadingFolders ? (
            <p className="text-gray-400">Chargement...</p>
          ) : filteredFolders.length === 0 ? (
            <p className="text-gray-500 text-sm">Aucun dossier trouvé.</p>
          ) : (
            <div className="space-y-2">
              {filteredFolders.map((folder) => (
                <Card
                  key={folder.folderNumber}
                  className={`transition-shadow bg-gray-800 border border-gray-700 cursor-pointer ${selectedFolder?.folderNumber === folder.folderNumber
                    ? 'border-blue-500' // Dossier sélectionné
                    : 'hover:border-gray-600'
                    }`}
                  onClick={() => setSelectedFolder(folder)}
                >
                  <CardContent className="p-3">
                    <div className="flex items-center space-x-3">
                      <Folder className="h-5 w-5 text-blue-500 flex-shrink-0" />
                      <div className="min-w-0">
                        <h3 className="font-medium text-gray-100 truncate">{folder.name}</h3>
                        {/* ID du dossier supprimé */}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* --- COLONNE 2: RÉSUMÉ DU DOSSIER (Largeur fixe) --- */}
      <div className="w-[600px] flex-shrink-0 flex flex-col h-full overflow-y-auto">
        {!selectedFolder ? (
          <div className="flex h-full items-center justify-center">
            <p className="text-gray-500">Sélectionnez un dossier pour voir le résumé</p>
          </div>
        ) : (
          <>
            {/* Header Colonne 2 */}
            <div className="flex-shrink-0">
              <h1 className="text-2xl font-semibold">{selectedFolder.name}</h1>
              <p className="text-gray-400 mt-2">{selectedFolder.description}</p>
              {/* Badge ID supprimé */}
            </div>

            {/* Contenu Colonne 2 */}
            <div className="flex-1 mt-6 space-y-6">
              <Card className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-lg font-medium text-gray-100 flex items-center">
                    <StickyNote className="h-5 w-5 mr-2 text-yellow-400" />
                    Notes du dossier
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  {selectedFolder.notes && selectedFolder.notes.length > 0 ? (
                    <ul className="list-disc pl-5 space-y-2">
                      {selectedFolder.notes.map((note, index) => (
                        <li key={index} className="text-gray-300">
                          {note}
                        </li>
                      ))}
                    </ul>
                  ) : (
                    <p className="text-gray-500">Aucune note pour ce dossier.</p>
                  )}
                </CardContent>
              </Card>

              <Card className="bg-gray-800 border-gray-700">
                <CardHeader>
                  <CardTitle className="text-lg font-medium text-gray-100 flex items-center">
                    <FileText className="h-5 w-5 mr-2 text-blue-400" />
                    Fichiers
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  {selectedFolder.files && selectedFolder.files.length > 0 ? (
                    <div className="space-y-3">
                      {selectedFolder.files.map((file, index) => (
                        <div key={index} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
                          <div className="flex items-center space-x-3 min-w-0">
                            <FileText className="h-5 w-5 text-gray-400 flex-shrink-0" />
                            <div className="min-w-0">
                              <p className="text-sm font-medium text-gray-100 truncate">{file.name || 'Fichier'}</p>
                              <p className="text-xs text-gray-400">{formatBytes(file.size || 0)}</p>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500">Aucun fichier dans ce dossier.</p>
                  )}
                </CardContent>
              </Card>
            </div>
          </>
        )}
      </div>

      {/* --- COLONNE 3: CHAT (flex-1) --- */}
      <div className="flex-1 bg-gray-800 border border-gray-700 rounded-lg flex flex-col overflow-hidden h-full">
        <FolderChat
          folder={selectedFolder} // Passe le dossier sélectionné (ou null)
        />
      </div>

      {/* --- MODALS (hors layout) --- */}
      {isModalOpen && (
        <FolderModal
          isOpen={isModalOpen}
          onClose={handleCloseModal}
          onSave={handleSaveNewFolder}
          onCancel={handleCloseModal}
          folderType={folderType || "autre"}
        />
      )}
      {notification && (
        <div className="fixed top-4 right-4 z-50">
          <div className={`p-4 rounded-md shadow-lg ${notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
            notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
              "bg-blue-50 text-blue-800 border border-blue-200"
            }`}>
            <div className="flex items-center justify-between">
              <span>{notification.message}</span>
              <Button variant="ghost" size="sm" onClick={() => setNotification(null)}>
                <X className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}