import { UserTablo } from "@xtablo/shared/types/tablos.types";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@xtablo/ui/components/select";
import { BookOpen } from "lucide-react";
import { useState } from "react";
import { useTabloNotes } from "../hooks/notes";
import { LoadingSpinner } from "./LoadingSpinner";
import { NotesEditor } from "./NotesEditor";

interface TabloNotesSectionProps {
  tablo: UserTablo;
  isAdmin: boolean;
}

export const TabloNotesSection = ({ tablo }: TabloNotesSectionProps) => {
  const { notes, isLoading } = useTabloNotes(tablo.id);
  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);

  // Auto-select first note when notes are loaded
  if (notes && notes.length > 0 && !selectedNoteId) {
    setSelectedNoteId(notes[0].id);
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <LoadingSpinner />
      </div>
    );
  }

  const selectedNote = notes?.find((note) => note.id === selectedNoteId);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Notes</h1>
        <p className="text-muted-foreground mt-1">Notes partagées avec ce tablo (lecture seule)</p>
      </div>

      {/* Empty State */}
      {!notes || notes.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
          <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
            <BookOpen className="w-8 h-8 text-muted-foreground" />
          </div>
          <h3 className="text-lg font-medium text-foreground mb-2">Aucune note partagée</h3>
          <p className="text-muted-foreground max-w-md">
            Il n'y a actuellement aucune note partagée avec ce tablo.
          </p>
        </div>
      ) : (
        <div className="space-y-6">
          {/* Note Selector */}
          <div className="flex items-center gap-4">
            <label className="text-sm font-medium text-foreground whitespace-nowrap">
              Sélectionner une note:
            </label>
            <Select value={selectedNoteId || undefined} onValueChange={setSelectedNoteId}>
              <SelectTrigger className="w-full max-w-md">
                <SelectValue placeholder="Choisir une note..." />
              </SelectTrigger>
              <SelectContent>
                {notes.map((note) => (
                  <SelectItem key={note.id} value={note.id}>
                    {note.title || "Sans titre"}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Selected Note Display */}
          {selectedNote && (
            <div className="border border-border rounded-lg bg-card overflow-hidden">
              <div className="border-b border-border bg-muted/30 px-6 py-4">
                <h2 className="text-xl font-semibold text-foreground">
                  {selectedNote.title || "Sans titre"}
                </h2>
                <p className="text-xs text-muted-foreground mt-1">
                  Dernière modification:{" "}
                  {selectedNote.updated_at &&
                    new Date(selectedNote.updated_at).toLocaleDateString("fr-FR", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                </p>
              </div>
              <div className="bg-background">
                <NotesEditor
                  key={selectedNote.id}
                  initialContent={selectedNote.content || ""}
                  readOnly={true}
                />
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};
