"use client";

import { useRouter } from "next/navigation";
import { FileText } from "lucide-react";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PageHeader } from "@/components/shared/page-header";
import { LoadingSkeleton } from "@/components/shared/loading-skeleton";
import { ErrorBanner } from "@/components/shared/error-banner";
import { EmptyState } from "@/components/shared/empty-state";
import { DocumentCard } from "@/components/documents/document-card";
import { useDocuments, useWarranties } from "@/lib/hooks/use-documents";
import { useDataProvider } from "@/lib/demo/data-provider-context";

export default function DocumentsPage() {
  const router = useRouter();
  const { basePath } = useDataProvider();
  const {
    data: documents,
    isLoading: documentsLoading,
    error: documentsError,
    refetch: refetchDocuments,
  } = useDocuments();
  const {
    data: warranties,
    isLoading: warrantiesLoading,
    error: warrantiesError,
    refetch: refetchWarranties,
  } = useWarranties();

  return (
    <div className="space-y-6">
      <PageHeader
        title="Documents"
        description="Warranties, manuals, receipts — all in one place"
        actionLabel="Save a Document"
        onAction={() => router.push(`${basePath}/documents/new`)}
      />

      <Tabs defaultValue="documents">
        <TabsList>
          <TabsTrigger value="documents">Documents</TabsTrigger>
          <TabsTrigger value="warranties">Warranties</TabsTrigger>
        </TabsList>

        <TabsContent value="documents" className="mt-4">
          {documentsLoading && <LoadingSkeleton variant="card-grid" />}

          {documentsError && (
            <ErrorBanner
              message="Failed to load documents."
              onRetry={() => refetchDocuments()}
            />
          )}

          {!documentsLoading &&
            !documentsError &&
            Array.isArray(documents) &&
            documents.length === 0 && (
              <EmptyState
                icon={FileText}
                title="No documents saved yet"
                description="Store warranties, manuals, receipts, and more — so they're easy to find when you need them."
                actionLabel="Save a Document"
                onAction={() => router.push(`${basePath}/documents/new`)}
              />
            )}

          {!documentsLoading &&
            !documentsError &&
            Array.isArray(documents) &&
            documents.length > 0 && (
              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {documents.map((doc) => (
                  <DocumentCard key={doc.id} document={doc} />
                ))}
              </div>
            )}
        </TabsContent>

        <TabsContent value="warranties" className="mt-4">
          {warrantiesLoading && <LoadingSkeleton variant="card-grid" />}

          {warrantiesError && (
            <ErrorBanner
              message="Failed to load warranties."
              onRetry={() => refetchWarranties()}
            />
          )}

          {!warrantiesLoading &&
            !warrantiesError &&
            Array.isArray(warranties) &&
            warranties.length === 0 && (
              <EmptyState
                icon={FileText}
                title="No warranties saved yet"
                description="When you save a document as a warranty, it'll show up here for easy access."
              />
            )}

          {!warrantiesLoading &&
            !warrantiesError &&
            Array.isArray(warranties) &&
            warranties.length > 0 && (
              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
                {warranties.map((doc) => (
                  <DocumentCard key={doc.id} document={doc} />
                ))}
              </div>
            )}
        </TabsContent>
      </Tabs>
    </div>
  );
}
