import { createFileRoute } from "@tanstack/react-router";
import { PublicHeader, Footer } from "@/components/layout/PublicHeader";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/docs")({
  head: () => ({ meta: [{ title: "Docs — warpbox.dev" }] }),
  component: Docs,
});

function Block({ children }: { children: string }) {
  return (
    <pre className="overflow-x-auto rounded-md border bg-muted/50 p-4 font-mono text-xs">
      <code>{children}</code>
    </pre>
  );
}

function Docs() {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <PublicHeader />
      <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-12">
        <h1 className="text-3xl font-semibold tracking-tight">Documentation</h1>
        <p className="mt-2 text-muted-foreground">Quick start for uploading via the web, curl, CLI, and ShareX.</p>

        <Card className="mt-8">
          <CardContent className="p-5">
            <Tabs defaultValue="curl">
              <TabsList>
                <TabsTrigger value="curl">curl</TabsTrigger>
                <TabsTrigger value="cli">CLI</TabsTrigger>
                <TabsTrigger value="api">REST API</TabsTrigger>
                <TabsTrigger value="sharex">ShareX</TabsTrigger>
              </TabsList>
              <TabsContent value="curl" className="mt-4">
                <Block>{`# Upload a file anonymously
curl --upload-file ./report.pdf https://warpbox.dev/
# → https://warpbox.dev/d/a1b2c3/report.pdf`}</Block>
              </TabsContent>
              <TabsContent value="cli" className="mt-4">
                <Block>{`# Install
brew install warpbox

# Upload with options
warpbox push ./video.mp4 --expires 7d --max-downloads 10 --password hunter2`}</Block>
              </TabsContent>
              <TabsContent value="api" className="mt-4">
                <Block>{`POST /api/v1/uploads
Authorization: Bearer <token>
Content-Type: multipart/form-data

{
  "expires_in": "7d",
  "max_downloads": 10,
  "password": "optional"
}`}</Block>
              </TabsContent>
              <TabsContent value="sharex" className="mt-4">
                <Block>{`{
  "Name": "warpbox.dev",
  "DestinationType": "ImageUploader, FileUploader",
  "RequestMethod": "POST",
  "RequestURL": "https://warpbox.dev/api/v1/uploads",
  "Body": "MultipartFormData",
  "FileFormName": "file",
  "URL": "{json:url}"
}`}</Block>
              </TabsContent>
            </Tabs>
          </CardContent>
        </Card>
      </main>
      <Footer />
    </div>
  );
}