import { Card, CardContent, CardHeader } from "@xtablo/ui/components/card";
import { TypographyH3, TypographyMuted } from "@xtablo/ui/components/typography";
import { FileTextIcon, SearchXIcon } from "lucide-react";
import { useParams } from "react-router-dom";
import { NotesEditor } from "../components/NotesEditor";
import { usePublicNote } from "../hooks/notes";

export function PublicNotePage() {
  const { noteId } = useParams<{ noteId: string }>();
  const { note, isLoading } = usePublicNote(noteId);

  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center bg-background">
        <Card className="w-full max-w-4xl mx-4">
          <CardContent className="flex items-center justify-center p-8">
            <div className="text-center">
              <TypographyMuted>Loading note...</TypographyMuted>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!note) {
    return (
      <div className="flex h-screen items-center justify-center bg-background">
        <Card className="w-full max-w-4xl mx-4">
          <CardContent className="flex flex-col items-center justify-center p-8 gap-4">
            <div className="rounded-full bg-muted p-6">
              <SearchXIcon className="size-12 text-muted-foreground" />
            </div>
            <div className="space-y-2 text-center">
              <TypographyH3 className="text-lg">Note not found</TypographyH3>
              <TypographyMuted className="text-sm max-w-md">
                This note doesn't exist, isn't public, or has been deleted.
              </TypographyMuted>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="flex h-screen flex-col bg-background">
      <div className="flex-1 p-6">
        <Card className="flex flex-col h-full max-w-5xl mx-auto">
          <CardHeader className="border-b flex flex-row items-center justify-between">
            <div className="flex items-center gap-3">
              <FileTextIcon className="size-6 text-primary" />
              <div className="flex-1">
                <TypographyH3 className="text-2xl font-bold">
                  {note.title || "Untitled Note"}
                </TypographyH3>
                <TypographyMuted className="text-sm">Read-only public note</TypographyMuted>
              </div>
            </div>
          </CardHeader>
          <CardContent className="flex-1 overflow-y-auto p-0">
            <NotesEditor initialContent={note.content ?? ""} readOnly={true} />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
