"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { FileText, PenSquare } from "lucide-react";
import { toast } from "sonner";
import type { FileDto, ListFilesResponseDto } from "@use2pdf/shared-types";
import { FileUploadDropzone } from "@/components/file-upload-dropzone";
import { SiteHeader } from "@/components/site-header";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Spinner } from "@/components/ui/spinner";
import { apiFetch, ApiRequestError } from "@/lib/api-client";
import { formatBytes } from "@/lib/format";

export default function EditorPickerPage() {
  const router = useRouter();
  const [files, setFiles] = useState<FileDto[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    apiFetch<ListFilesResponseDto>("/files?page=1&pageSize=100&sortBy=createdAt&sortDir=desc")
      .then((data) => setFiles(data.files.filter((f) => f.mimeType === "application/pdf")))
      .catch((err) => toast.error(err instanceof ApiRequestError ? err.message : "Could not load your files"))
      .finally(() => setIsLoading(false));
  }, []);

  function openInEditor(file: FileDto) {
    router.push(`/editor/${file.id}`);
  }

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <SiteHeader />
      <main className="mx-auto max-w-3xl px-4 py-10">
        <div className="mb-8 text-center">
          <PenSquare className="mx-auto h-10 w-10 text-brand-600" />
          <h1 className="mt-3 text-3xl font-bold text-slate-900 dark:text-slate-100">Visual PDF editor</h1>
          <p className="mt-2 text-slate-500 dark:text-slate-400">
            Add text, images, shapes, signatures, watermarks and more — right on the page.
          </p>
        </div>

        <FileUploadDropzone
          accept="pdf"
          multiple={false}
          onUploaded={(uploaded) => {
            if (uploaded[0]) openInEditor(uploaded[0]);
          }}
        />

        <Card className="mt-6">
          <CardHeader>
            <CardTitle>…or pick one of your PDFs</CardTitle>
          </CardHeader>
          <CardContent>
            {isLoading ? (
              <div className="flex justify-center py-8">
                <Spinner className="h-7 w-7 text-brand-600" />
              </div>
            ) : files.length === 0 ? (
              <p className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">
                No PDFs yet — upload one above to start editing.
              </p>
            ) : (
              <ul className="divide-y divide-slate-100 dark:divide-slate-700">
                {files.map((file) => (
                  <li key={file.id}>
                    <button
                      type="button"
                      onClick={() => openInEditor(file)}
                      className="flex w-full items-center gap-3 px-1 py-2.5 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-700/50"
                    >
                      <FileText className="h-6 w-6 shrink-0 text-red-500" />
                      <span className="min-w-0 flex-1">
                        <span className="block truncate text-sm font-medium text-slate-900 dark:text-slate-100">
                          {file.originalName}
                        </span>
                        <span className="text-xs text-slate-500 dark:text-slate-400">{formatBytes(file.sizeBytes)}</span>
                      </span>
                      <span className="text-xs font-medium text-brand-600">Edit →</span>
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </CardContent>
        </Card>
      </main>
    </div>
  );
}