"use client";

import { useEffect, useMemo, useState, type ChangeEvent, type FormEvent } from "react";
import { useTheme } from "next-themes";
import { Copy, FileJson, Globe, Search, Shield, AlertTriangle, Terminal, Settings2, Info, BookOpen, Key, Moon, Sun } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const PRESET_SNIPPETS = [
  {
    label: "Skip forms",
    text: "The agent MUST NOT fill or submit any forms.",
  },
  {
    label: "Read-only",
    text: "Limit the agent to reading content and following public navigation links only.",
  },
  {
    label: "Respect rate limits",
    text: "The agent SHOULD throttle requests and avoid more than one page fetch per second.",
  },
];

type ExistingPolicy = {
  url: string;
  status: number;
  body?: unknown;
  raw?: string;
} | null;

type CrawlSummary = {
  totalPages: number;
  pagesWithForms: number;
  pagesWithLogins: number;
  robots: {
    present: boolean;
    crawlDelay?: number | null;
  };
};

type CrawlPage = {
  url: string;
  title: string | null;
  textContent: string;
  htmlContent: string;
  isTextTruncated: boolean;
  isHtmlTruncated: boolean;
  wordCount: number;
  hasForms: boolean;
  hasSearch: boolean;
  containsLogin: boolean;
};

type ProcessLogEntry = {
  step: string;
  detail?: string;
  elapsedMs: number;
};

type ApiResponse = {
  input: {
    url: string;
    instructions: string;
    mode: string;
  };
  notes: string[];
  existingPolicy: ExistingPolicy;
  llm: {
    model: string;
    raw: string;
    policy: unknown | null;
    error?: string;
  };
  processLog: ProcessLogEntry[];
  crawlSummary: CrawlSummary;
  crawlPages: CrawlPage[];
};

type QuickBuilderState = {
  siteName: string;
  allowReadContent: boolean;
  allowReadMetadata: boolean;
  allowNavigation: boolean;
  allowForms: boolean;
  requireHumanForForms: boolean;
  blockLogin: boolean;
  rateLimit: "gentle" | "standard" | "open";
  allowDownloads: boolean;
};

type ParsedPolicy = {
  error?: string;
  metadata?: {
    schema_version?: string;
    last_updated?: string;
    author?: string;
  };
  resourceRules: Array<{
    verb: string;
    selector: string;
    allowed: boolean;
    modifiers?: {
      burst?: number;
      rate_limit?: { max_requests?: number; window_seconds?: number };
      time_window?: string;
      human_in_the_loop?: boolean;
    };
  }>;
  actionGuidelines: Array<{
    directive: string;
    description: string;
    exceptions?: string;
  }>;
};

type TabKey = "quick" | "generator" | "parser";

const DEFAULT_QUICK_STATE: QuickBuilderState = {
  siteName: "",
  allowReadContent: true,
  allowReadMetadata: true,
  allowNavigation: true,
  allowForms: true,
  requireHumanForForms: false,
  blockLogin: false,
  rateLimit: "open",
  allowDownloads: true,
};

export default function Home() {
  const [activeTab, setActiveTab] = useState<TabKey>("quick");
  const { theme, setTheme } = useTheme();
  // State for mounting to avoid hydration mismatch
  const [mounted, setMounted] = useState(false);
  const [url, setUrl] = useState("");
  const [instructions, setInstructions] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<ApiResponse | null>(null);
  const [processLog, setProcessLog] = useState<ProcessLogEntry[]>([]);
  const [quickState, setQuickState] = useState<QuickBuilderState>(DEFAULT_QUICK_STATE);
  const [parserInput, setParserInput] = useState<string>(`{
  "metadata": {
    "schema_version": "1.0.0",
    "last_updated": "2025-01-01T00:00:00Z",
    "author": "Example Corp"
  },
  "resource_rules": [
    {
      "verb": "read_content",
      "selector": "*",
      "allowed": true
    },
    {
      "verb": "follow_link",
      "selector": "nav a, main a",
      "allowed": true
    }
  ],
  "action_guidelines": [
    {
      "directive": "MUST NOT",
      "description": "Submit credentials or attempt to log in."
    }
  ]
}`);

  const quickPolicy = useMemo(() => buildQuickPolicy(quickState), [quickState]);
  const parsedPolicy = useMemo(() => parsePolicy(parserInput), [parserInput]);

  useEffect(() => {
    setMounted(true);
  }, []);

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitting(true);
    setError(null);
    setResult(null);
    setProcessLog([{ step: "Submitting request", detail: url, elapsedMs: 0 }]);

    const started = Date.now();

    try {
      const response = await fetch("/api/generate?stream=1", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          url,
          instructions,
          mode: "static",
        }),
      });

      if (!response.ok || !response.body) {
        const payload = (await response.json().catch(() => null)) as { error?: string } | null;
        throw new Error(payload?.error ?? "Request failed.");
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = "";

      const flushChunk = (chunk: string) => {
        const parts = chunk.split("\n").filter(Boolean);
        if (!parts.length) return;
        const eventLine = parts.find((line) => line.startsWith("event:"));
        const dataLine = parts.find((line) => line.startsWith("data:"));
        const eventType = eventLine ? eventLine.replace("event:", "").trim() : "message";
        const dataRaw = dataLine ? dataLine.replace("data:", "").trim() : "";

        let parsed: unknown = null;
        if (dataRaw) {
          try {
            parsed = JSON.parse(dataRaw);
          } catch {
            parsed = null;
          }
        }

        if (eventType === "log" && parsed && typeof parsed === "object") {
          setProcessLog((prev) => [...prev, parsed as ProcessLogEntry]);
        } else if (eventType === "result" && parsed) {
          const payload = parsed as ApiResponse;
          setResult(payload);
          setProcessLog(payload.processLog ?? []);
        } else if (eventType === "error") {
          const message = (parsed as { message?: string } | null)?.message ?? "Request failed.";
          throw new Error(message);
        }
      };

      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          if (buffer.trim()) {
            flushChunk(buffer);
          }
          break;
        }
        buffer += decoder.decode(value, { stream: true });
        let boundary = buffer.indexOf("\n\n");
        while (boundary !== -1) {
          const chunk = buffer.slice(0, boundary);
          flushChunk(chunk);
          buffer = buffer.slice(boundary + 2);
          boundary = buffer.indexOf("\n\n");
        }
      }
    } catch (err) {
      setResult(null);
      setProcessLog((prev) => [
        ...prev,
        {
          step: "Request failed",
          detail: err instanceof Error ? err.message : "Unknown error",
          elapsedMs: Date.now() - started,
        },
      ]);
      setError(err instanceof Error ? err.message : "Unknown error.");
    } finally {
      setSubmitting(false);
    }
  };

  const handlePreset = (snippet: string) => {
    setInstructions((current) =>
      current.includes(snippet)
        ? current
        : current.length > 0
          ? `${current.trim()}\n${snippet}`
          : snippet,
    );
  };

  const hasResults = Boolean(result);
  const activeTimeline = result?.processLog?.length ? result.processLog : processLog;

  if (!mounted) {
    return null;
  }

  return (
    <div className="min-h-screen bg-background text-foreground transition-colors duration-300">
      <div className="flex justify-end p-4 pb-1">
        <div className="flex items-center gap-1 bg-muted/50 p-1 rounded-full border">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setTheme("light")}
            className={cn("rounded-full w-10 h-10", theme === "light" && "bg-blue-500 text-white shadow-sm hover:bg-blue-600")}
            title="Light Mode"
          >
            <Sun className="h-5 w-5" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setTheme("dark")}
            className={cn("rounded-full w-10 h-10", theme === "dark" && "bg-blue-500 text-white shadow-sm hover:bg-blue-600")}
            title="Dark Mode"
          >
            <Moon className="h-5 w-5" />
          </Button>
        </div>
      </div>

      <header className="container max-w-4xl mx-auto pt-8 pb-12 text-center">
        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-4 bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
          agent-permissions.json
        </h1>
        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
          Tools to help you define what AI agents can and cannot do on your website.
        </p>
      </header>

      <main className="container max-w-7xl mx-auto px-4 pb-20">
        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabKey)} className="w-full">
          <TabsList className="grid w-full max-w-md mx-auto grid-cols-3 mb-10">
            <TabsTrigger value="quick">Quick Builder</TabsTrigger>
            <TabsTrigger value="generator">Generator</TabsTrigger>
            <TabsTrigger value="parser">Parser</TabsTrigger>
          </TabsList>

          <TabsContent value="quick" className="space-y-6 animate-in fade-in-50 duration-500">
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
              <Card className="lg:col-span-2">
                <CardHeader>
                  <CardTitle>Configure Permissions</CardTitle>
                  <CardDescription>
                    Rapidly create a policy by toggling common permissions.
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="space-y-2">
                    <Label htmlFor="site-name">Site or Organization Name</Label>
                    <Input
                      id="site-name"
                      placeholder="e.g. Acme Inc"
                      value={quickState.siteName}
                      onChange={(e) => setQuickState((prev) => ({ ...prev, siteName: e.target.value }))}
                    />
                  </div>

                  <Separator />

                  <div className="space-y-4">
                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Read Content</Label>
                        <p className="text-sm text-muted-foreground">
                          Let agents read visible text on the page.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.allowReadContent}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, allowReadContent: c }))}
                      />
                    </div>

                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Read Metadata</Label>
                        <p className="text-sm text-muted-foreground">
                          Permit reading titles, meta tags, and structured data.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.allowReadMetadata}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, allowReadMetadata: c }))}
                      />
                    </div>

                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Navigation</Label>
                        <p className="text-sm text-muted-foreground">
                          Let agents follow links inside the page context.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.allowNavigation}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, allowNavigation: c }))}
                      />
                    </div>

                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Interact with Forms</Label>
                        <p className="text-sm text-muted-foreground">
                          Permit inputs and form submissions.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.allowForms}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, allowForms: c }))}
                      />
                    </div>

                    <div className={cn("flex flex-row items-center justify-between rounded-lg border p-4 ml-8 transition-opacity", !quickState.allowForms && "opacity-50 pointer-events-none")}>
                      <div className="space-y-0.5">
                        <Label className="text-base">Human Confirmation</Label>
                        <p className="text-sm text-muted-foreground">
                          Require human approval for form actions.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.requireHumanForForms}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, requireHumanForForms: c }))}
                        disabled={!quickState.allowForms}
                      />
                    </div>

                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Block Login</Label>
                        <p className="text-sm text-muted-foreground">
                          Explicitly forbid authentication attempts.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.blockLogin}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, blockLogin: c }))}
                      />
                    </div>

                    <div className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <Label className="text-base">Allow Downloads</Label>
                        <p className="text-sm text-muted-foreground">
                          Permit file downloads.
                        </p>
                      </div>
                      <Switch
                        checked={quickState.allowDownloads}
                        onCheckedChange={(c) => setQuickState((prev) => ({ ...prev, allowDownloads: c }))}
                      />
                    </div>
                  </div>

                  <Separator />

                  <div className="space-y-3">
                    <Label>Navigation Rate Limit</Label>
                    <div className="grid grid-cols-3 gap-2">
                      <Button
                        variant={quickState.rateLimit === "gentle" ? "default" : "outline"}
                        onClick={() => setQuickState((prev) => ({ ...prev, rateLimit: "gentle" }))}
                        className="w-full"
                      >
                        Gentle (1/s)
                      </Button>
                      <Button
                        variant={quickState.rateLimit === "standard" ? "default" : "outline"}
                        onClick={() => setQuickState((prev) => ({ ...prev, rateLimit: "standard" }))}
                        className="w-full"
                      >
                        Standard (5/10s)
                      </Button>
                      <Button
                        variant={quickState.rateLimit === "open" ? "default" : "outline"}
                        onClick={() => setQuickState((prev) => ({ ...prev, rateLimit: "open" }))}
                        className="w-full"
                      >
                        No Limit
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <div className="space-y-6 lg:col-span-3">
                <Card className="h-full flex flex-col">
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle>Preview</CardTitle>
                    <CopyButton text={quickPolicy} />
                  </CardHeader>
                  <CardContent className="flex-1 min-h-[500px]">
                    <pre className="bg-muted p-4 rounded-lg overflow-auto text-sm font-mono h-full max-h-[800px]">
                      {quickPolicy}
                    </pre>
                  </CardContent>
                </Card>
              </div>
            </div>
          </TabsContent>

          <TabsContent value="generator" className="animate-in fade-in-50 duration-500">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div className="space-y-6">
                <Card>
                  <CardHeader>
                    <CardTitle>AI Policy Generator</CardTitle>
                    <CardDescription>
                      Enter a URL to analyze the site and generate a tailored policy.
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <form onSubmit={handleSubmit} className="space-y-6">
                      <div className="space-y-2">
                        <Label htmlFor="site-url">Website URL</Label>
                        <div className="relative">
                          <Globe className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                          <Input
                            id="site-url"
                            type="url"
                            placeholder="https://example.com"
                            className="pl-9"
                            required
                            value={url}
                            onChange={(e) => setUrl(e.target.value)}
                          />
                        </div>
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="instructions">Instructions</Label>
                        <Textarea
                          id="instructions"
                          placeholder="e.g. This is a public documentation site..."
                          className="min-h-[150px]"
                          value={instructions}
                          onChange={(e) => setInstructions(e.target.value)}
                        />
                      </div>

                      <div className="space-y-3">
                        <Label className="text-xs text-muted-foreground uppercase tracking-wider font-semibold">Quick Additions</Label>
                        <div className="flex flex-wrap gap-2">
                          {PRESET_SNIPPETS.map((preset) => (
                            <Button
                              key={preset.label}
                              type="button"
                              variant="secondary"
                              size="sm"
                              onClick={() => handlePreset(preset.text)}
                              disabled={submitting}
                            >
                              {preset.label}
                            </Button>
                          ))}
                        </div>
                      </div>

                      <Button type="submit" className="w-full" disabled={submitting}>
                        {submitting ? "Analyzing and Generating..." : "Generate Draft Policy"}
                      </Button>

                      {error && (
                        <div className="p-3 text-sm text-destructive bg-destructive/10 rounded-md flex items-center gap-2">
                          <AlertTriangle className="h-4 w-4" />
                          {error}
                        </div>
                      )}
                    </form>
                  </CardContent>
                </Card>
              </div>

              <div className="space-y-6">
                <Card className="min-h-[200px]">
                  <CardHeader>
                    <CardTitle>Analysis Log</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {activeTimeline.length > 0 ? (
                      <ProcessTimeline log={activeTimeline} loading={submitting} />
                    ) : (
                      <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
                        <Terminal className="h-12 w-12 mb-4 opacity-20" />
                        <p>Waiting to start...</p>
                      </div>
                    )}
                  </CardContent>
                </Card>

                {result && (
                  <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500">
                    <div className="p-4 border rounded-lg bg-card shadow-sm">
                      <StatusChips summary={result.crawlSummary} notes={result.notes} />
                    </div>

                    {result.llm.error && (
                      <div className="p-4 rounded-lg bg-orange-500/10 border-orange-500/20 text-orange-700 dark:text-orange-400">
                        <strong>Model warning:</strong> {result.llm.error}
                      </div>
                    )}

                    <JsonCard title="Generated Policy" data={result.llm.policy} />

                    <AccordionWrapper title={`Raw Response (${result.llm.model})`}>
                      <JsonCard title={null} data={result.llm.raw} emptyMessage="No response." />
                    </AccordionWrapper>

                    <AccordionWrapper title="Existing Policy on Site">
                      <JsonCard
                        title={null}
                        data={result.existingPolicy?.body ?? result.existingPolicy?.raw ?? null}
                        emptyMessage="No existing agent-permissions.json found."
                      />
                    </AccordionWrapper>

                    <AccordionWrapper title="Page Snapshot Data">
                      <CrawlPagesCard pages={result.crawlPages} />
                    </AccordionWrapper>
                  </div>
                )}
              </div>
            </div>
          </TabsContent>

          <TabsContent value="parser" className="animate-in fade-in-50 duration-500">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <Card>
                <CardHeader>
                  <CardTitle>Input JSON</CardTitle>
                  <CardDescription>Paste your agent-permissions.json here to analyze it.</CardDescription>
                </CardHeader>
                <CardContent>
                  <Textarea
                    className="font-mono text-sm min-h-[500px]"
                    value={parserInput}
                    onChange={(e) => setParserInput(e.target.value)}
                  />
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Human Readable Summary</CardTitle>
                </CardHeader>
                <CardContent>
                  <ParserSummary parsed={parsedPolicy} />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>

        <section className="mt-24 space-y-12">
          <div className="text-center space-y-4">
            <h2 className="text-3xl font-bold tracking-tight">Understanding agent-permissions.json</h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
              A standard for declaring how automated agents interact with your content, giving you fine-grained control beyond robots.txt.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="bg-muted/30 border-none shadow-none">
              <CardHeader>
                <Info className="w-8 h-8 text-primary mb-2" />
                <CardTitle>What is it?</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  A machine-readable, versioned JSON file that websites use to grant specific permissions to AI agents. Unlike the binary "allow/disallow" of robots.txt, it handles complex interaction rules like form submission, navigation limits, and content reading.
                </p>
              </CardContent>
            </Card>

            <Card className="bg-muted/30 border-none shadow-none">
              <CardHeader>
                <Key className="w-8 h-8 text-primary mb-2" />
                <CardTitle>Resource Rules</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Defines exactly <strong>how</strong> an agent can interact with specific elements. Rules use CSS selectors to target parts of the page and assign permissions like <code>read_content</code>, <code>click_element</code>, or <code>submit_form</code>.
                </p>
              </CardContent>
            </Card>

            <Card className="bg-muted/30 border-none shadow-none">
              <CardHeader>
                <BookOpen className="w-8 h-8 text-primary mb-2" />
                <CardTitle>Action Guidelines</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground leading-relaxed">
                  Provides high-level, natural language directives using RFC 2119 keywords (MUST, SHOULD). These guide the agent's intent, such as "MUST NOT attempt to log in" or "SHOULD ask for human confirmation".
                </p>
              </CardContent>
            </Card>
          </div>

          <div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="w-full">
              <AccordionItem value="item-1">
                <AccordionTrigger>Why do I need this?</AccordionTrigger>
                <AccordionContent className="text-muted-foreground">
                  As AI agents become more autonomous, they need clear boundaries. This standard allows you to welcome helpful agents (like shopping assistants or researchers) while preventing them from performing dangerous actions like deleting data, making purchases, or spamming forms.
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-2">
                <AccordionTrigger>Supported Permissions (Verbs)</AccordionTrigger>
                <AccordionContent>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>• <strong>read_content</strong>: Read visible text</li>
                      <li>• <strong>read_metadata</strong>: Access meta tags/JSON-LD</li>
                      <li>• <strong>follow_link</strong>: Navigate via links</li>
                      <li>• <strong>click_element</strong>: Click buttons/UI</li>
                      <li>• <strong>set_input_value</strong>: Fill form fields</li>
                    </ul>
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>• <strong>submit_form</strong>: Submit HTML forms</li>
                      <li>• <strong>download/upload_file</strong>: Handle files</li>
                      <li>• <strong>execute_script</strong>: Run page JS</li>
                      <li>• <strong>media actions</strong>: Play, pause, mute</li>
                    </ul>
                  </div>
                </AccordionContent>
              </AccordionItem>
              <AccordionItem value="item-3">
                <AccordionTrigger>Where do I put the file?</AccordionTrigger>
                <AccordionContent className="text-muted-foreground">
                  Place the file at <code>/.well-known/agent-permissions.json</code> on your domain. Alternatively, you can add a <code>&lt;link rel="agent-permissions" href="..." /&gt;</code> tag to your HTML head pointing to the file location.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </section>
      </main>
    </div>
  );
}

// Sub-components

function AccordionWrapper({ title, children }: { title: string, children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border rounded-lg overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between p-4 bg-muted/30 hover:bg-muted/50 transition-colors text-sm font-medium"
      >
        {title}
        <span className={cn("transition-transform", open ? "rotate-90" : "")}>›</span>
      </button>
      {open && <div className="p-0 border-t">{children}</div>}
    </div>
  )
}


function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false);

  const handleClick = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 1000);
    } catch {
      setCopied(false);
    }
  };

  return (
    <Button variant="ghost" size="icon" onClick={handleClick} className="h-8 w-8">
      {copied ? <span className="text-green-500 font-bold text-xs">✓</span> : <Copy className="h-4 w-4" />}
    </Button>
  );
}

function JsonCard({
  title,
  data,
  emptyMessage = "Nothing to show yet.",
}: {
  title: string | null;
  data: unknown;
  emptyMessage?: string;
}) {
  const pretty = useMemo(() => {
    if (data === null || data === undefined) return null;
    if (typeof data === "string") return data;
    return JSON.stringify(data, null, 2);
  }, [data]);

  return (
    <div className="rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden">
      {title && (
        <div className="flex flex-col space-y-1.5 p-4 border-b">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold leading-none tracking-tight">{title}</h3>
            {pretty && <CopyButton text={pretty} />}
          </div>
        </div>
      )}
      <div className="p-0">
        {pretty ? (
          <ScrollArea className="h-full max-h-[500px] w-full">
            <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-all">{pretty}</pre>
          </ScrollArea>
        ) : (
          <div className="p-4 text-muted-foreground text-sm">{emptyMessage}</div>
        )}
      </div>
    </div>
  );
}


function ProcessTimeline({ log, loading }: { log: ProcessLogEntry[]; loading?: boolean }) {
  if (!log.length) return null;

  return (
    <div className="space-y-4">
      <ScrollArea className="h-[300px] w-full rounded-md border p-4">
        <ul className="space-y-3">
          {log.map((entry, index) => (
            <li key={`${entry.step}-${index}`} className="flex flex-col gap-1 text-sm border-b mr-3 pb-2 last:border-0 last:pb-0">
              <div className="flex justify-between items-center text-foreground font-medium">
                <span>{entry.step}</span>
                <span className="text-xs text-muted-foreground font-mono">{formatMs(entry.elapsedMs)}</span>
              </div>
              {entry.detail && <span className="text-xs text-muted-foreground break-all">{entry.detail}</span>}
            </li>
          ))}
          {loading && (
            <li className="flex items-center justify-center pt-2 text-muted-foreground text-xs animate-pulse">
              Processing...
            </li>
          )}
        </ul>
      </ScrollArea>
    </div>
  );
}

function StatusChips({ summary, notes }: { summary: CrawlSummary; notes: string[] }) {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="outline" className="text-xs py-1">
        {summary.totalPages} page snapshot
      </Badge>
      {summary.pagesWithForms > 0 && (
        <Badge variant="secondary" className="text-xs py-1">
          {summary.pagesWithForms} form{summary.pagesWithForms !== 1 ? "s" : ""}
        </Badge>
      )}
      <Badge variant={summary.robots.present ? "default" : "destructive"} className="text-xs py-1">
        {summary.robots.present ? "robots.txt" : "No robots.txt"}
        {typeof summary.robots.crawlDelay === "number" && ` (delay ${summary.robots.crawlDelay}s)`}
      </Badge>
      {notes.map((note) => (
        <Badge key={note} variant="outline" className="text-xs py-1 border-yellow-500/50 text-yellow-600 bg-yellow-500/10">
          {note}
        </Badge>
      ))}
    </div>
  );
}

function CrawlPagesCard({ pages }: { pages: CrawlPage[] }) {
  if (!pages.length) {
    return <div className="p-4 text-center text-muted-foreground text-sm">No page content captured.</div>;
  }

  return (
    <div className="divide-y">
      {pages.map((page) => (
        <div key={page.url} className="p-4 hover:bg-muted/20 transition-colors">
          <div className="mb-2">
            <div className="flex items-center justify-between mb-1">
              <span className="font-mono text-xs text-muted-foreground truncate max-w-[70%]">{page.url}</span>
              <Badge variant="secondary" className="text-[10px]">{page.wordCount} words</Badge>
            </div>
            {page.title && <h4 className="font-medium text-sm text-foreground">{page.title}</h4>}
          </div>

          <div className="flex gap-2 mb-3">
            {page.hasForms && <Badge variant="outline" className="text-[10px] h-5">Form</Badge>}
            {page.containsLogin && <Badge variant="outline" className="text-[10px] h-5">Login</Badge>}
            {page.hasSearch && <Badge variant="outline" className="text-[10px] h-5">Search</Badge>}
          </div>

          {(page.isTextTruncated || page.isHtmlTruncated) && (
            <div className="text-[10px] text-yellow-600 dark:text-yellow-500 mb-2 flex items-center gap-1">
              <AlertTriangle className="h-3 w-3" />
              <span>Truncated content</span>
            </div>
          )}

          <div className="grid grid-cols-2 gap-2 mt-2">
            <details className="group">
              <summary className="text-xs cursor-pointer text-primary hover:underline select-none">View Text</summary>
              <div className="mt-2 p-2 bg-muted rounded text-[10px] font-mono whitespace-pre-wrap max-h-40 overflow-auto">
                {page.textContent}
              </div>
            </details>
            <details className="group">
              <summary className="text-xs cursor-pointer text-primary hover:underline select-none">View HTML</summary>
              <div className="mt-2 p-2 bg-muted rounded text-[10px] font-mono whitespace-pre-wrap max-h-40 overflow-auto">
                {page.htmlContent}
              </div>
            </details>
          </div>
        </div>
      ))}
    </div>
  );
}

function ParserSummary({ parsed }: { parsed: ParsedPolicy }) {
  if (parsed.error) {
    return (
      <div className="p-4 text-destructive border border-destructive/20 bg-destructive/5 rounded-md text-sm">
        Could not parse JSON: {parsed.error}
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {parsed.metadata ? (
        <div className="flex flex-wrap gap-2 text-sm">
          <Badge variant="secondary">Schema {parsed.metadata.schema_version ?? "?"}</Badge>
          {parsed.metadata.last_updated && <Badge variant="outline">Updated {formatDate(parsed.metadata.last_updated)}</Badge>}
          {parsed.metadata.author && <Badge variant="outline">Author: {parsed.metadata.author}</Badge>}
        </div>
      ) : (
        <p className="text-sm text-muted-foreground">No metadata found.</p>
      )}

      <div>
        <h3 className="font-semibold text-sm mb-2 uppercase tracking-wide text-muted-foreground">Resource Rules</h3>
        {parsed.resourceRules.length === 0 && <p className="text-sm text-muted-foreground italic">None present.</p>}
        <ul className="space-y-2">
          {parsed.resourceRules.map((rule, index) => (
            <li key={`${rule.verb}-${rule.selector}-${index}`} className="flex items-start gap-2 text-sm border p-2 rounded-md bg-card">
              <div className={cn("mt-0.5 h-2 w-2 rounded-full", rule.allowed ? "bg-green-500" : "bg-red-500")} />
              <div className="flex-1">
                <span className="font-semibold text-foreground">{formatVerb(rule.verb)}</span>
                <span className="text-muted-foreground mx-1">on</span>
                <code className="bg-muted px-1 py-0.5 rounded text-xs">{rule.selector}</code>
                <div className="flex flex-wrap gap-1 mt-1">
                  {rule.modifiers?.rate_limit && (
                    <Badge variant="outline" className="text-[10px]">
                      Limit: {rule.modifiers.rate_limit.max_requests ?? "?"}/{rule.modifiers.rate_limit.window_seconds ?? "?"}s
                    </Badge>
                  )}
                  {rule.modifiers?.human_in_the_loop && <Badge variant="outline" className="text-[10px]">Human Confirmation</Badge>}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>

      <div>
        <h3 className="font-semibold text-sm mb-2 uppercase tracking-wide text-muted-foreground">Action Guidelines</h3>
        {parsed.actionGuidelines.length === 0 && <p className="text-sm text-muted-foreground italic">None present.</p>}
        <ul className="space-y-2">
          {parsed.actionGuidelines.map((item, index) => (
            <li key={`${item.directive}-${index}`} className="p-3 bg-muted/30 rounded-md text-sm">
              <div className="flex items-center gap-2 mb-1">
                <Badge variant={item.directive === "MUST NOT" ? "destructive" : "default"}>{item.directive}</Badge>
              </div>
              <p className="text-foreground">{item.description}</p>
              {item.exceptions && <p className="text-xs text-muted-foreground mt-1">Except: {item.exceptions}</p>}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

// Logic helpers preserved
function buildQuickPolicy(state: QuickBuilderState): string {
  const now = new Date().toISOString();
  const rules = [
    { verb: "read_content", selector: "*", allowed: state.allowReadContent },
    { verb: "read_metadata", selector: "*", allowed: state.allowReadMetadata },
    {
      verb: "follow_link",
      selector: "*",
      allowed: state.allowNavigation,
      modifiers: state.allowNavigation ? buildRateLimit(state.rateLimit) : undefined,
    },
    {
      verb: "set_input_value",
      selector: "form input, form textarea, form select, form option, form button",
      allowed: state.allowForms,
      modifiers: state.allowForms && state.requireHumanForForms ? { human_in_the_loop: true } : undefined,
    },
    {
      verb: "submit_form",
      selector: "form",
      allowed: state.allowForms,
      modifiers: state.allowForms && state.requireHumanForForms ? { human_in_the_loop: true } : undefined,
    },
    { verb: "execute_script", selector: "*", allowed: false },
    { verb: "upload_file", selector: "input[type='file']", allowed: false },
    {
      verb: "download_file",
      selector: state.allowDownloads ? "*" : "a[download], [role='button']",
      allowed: state.allowDownloads,
    },
  ];

  const guidelines = [
    state.blockLogin
      ? {
        directive: "MUST NOT",
        description: "Attempt to log in or submit credentials, MFA codes, or session tokens.",
      }
      : null,
    state.allowForms
      ? {
        directive: state.requireHumanForForms ? "SHOULD" : "SHOULD",
        description: state.requireHumanForForms
          ? "Confirm with a human before submitting forms or irreversible actions."
          : "Keep form submissions minimal and avoid sensitive personal data.",
      }
      : null,
    state.rateLimit === "gentle"
      ? {
        directive: "SHOULD",
        description: "Throttle navigation to roughly one request per second.",
      }
      : null,
    state.rateLimit === "standard"
      ? {
        directive: "SHOULD",
        description: "Stay within ~5 requests every 10 seconds to reduce load.",
      }
      : null,
  ].filter(Boolean) as ParsedPolicy["actionGuidelines"];

  const policy = {
    metadata: {
      schema_version: "1.0.0",
      last_updated: now,
      ...(state.siteName.trim() ? { author: state.siteName.trim() } : {}),
    },
    resource_rules: rules.map((rule) => {
      const cleaned = { ...rule } as typeof rule & { modifiers?: typeof rule["modifiers"] };
      if (!cleaned.modifiers) delete cleaned.modifiers;
      return cleaned;
    }),
    action_guidelines: guidelines,
  };

  return JSON.stringify(policy, null, 2);
}

function buildRateLimit(rateLimit: QuickBuilderState["rateLimit"]) {
  if (rateLimit === "open") return undefined;
  if (rateLimit === "standard") {
    return {
      rate_limit: {
        max_requests: 5,
        window_seconds: 10,
      },
    };
  }

  return {
    rate_limit: {
      max_requests: 1,
      window_seconds: 1,
    },
  };
}

function parsePolicy(raw: string): ParsedPolicy {
  if (!raw.trim()) {
    return { resourceRules: [], actionGuidelines: [] };
  }

  try {
    const data = JSON.parse(raw);
    const metadata = typeof data.metadata === "object" && data.metadata ? data.metadata : undefined;

    const resourceRuleCandidates = Array.isArray(data.resource_rules) ? (data.resource_rules as unknown[]) : [];
    const resourceRules = resourceRuleCandidates
      .filter(
        (rule): rule is { verb: string; selector: string; allowed: boolean; modifiers?: ParsedPolicy["resourceRules"][number]["modifiers"] } =>
          Boolean(
            rule &&
            typeof (rule as { verb?: unknown }).verb === "string" &&
            typeof (rule as { selector?: unknown }).selector === "string" &&
            typeof (rule as { allowed?: unknown }).allowed === "boolean",
          ),
      )
      .map((rule) => ({
        verb: rule.verb,
        selector: rule.selector,
        allowed: rule.allowed,
        modifiers: rule.modifiers,
      }));

    const actionGuidelineCandidates = Array.isArray(data.action_guidelines)
      ? (data.action_guidelines as unknown[])
      : [];
    const actionGuidelines = actionGuidelineCandidates
      .filter(
        (item): item is { directive: string; description: string; exceptions?: string } =>
          Boolean(
            item &&
            typeof (item as { directive?: unknown }).directive === "string" &&
            typeof (item as { description?: unknown }).description === "string",
          ),
      )
      .map((item) => ({
        directive: item.directive,
        description: item.description,
        exceptions: item.exceptions,
      }));

    return {
      metadata,
      resourceRules,
      actionGuidelines,
    };
  } catch (error) {
    return {
      error: error instanceof Error ? error.message : "Unable to parse JSON.",
      resourceRules: [],
      actionGuidelines: [],
    };
  }
}

function formatVerb(verb: string) {
  const labels: Record<string, string> = {
    all: "All actions",
    read_content: "Read content",
    read_metadata: "Read metadata",
    follow_link: "Follow links",
    click_element: "Click elements",
    scroll_page: "Scroll page",
    set_input_value: "Fill inputs",
    submit_form: "Submit forms",
    execute_script: "Execute script",
    play_media: "Play media",
    pause_media: "Pause media",
    mute_media: "Mute media",
    unmute_media: "Unmute media",
    upload_file: "Upload files",
    download_file: "Download files",
    copy_to_clipboard: "Copy to clipboard",
  };

  if (labels[verb]) return labels[verb];
  const spaced = verb.replace(/_/g, " ");
  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
}

function formatDate(raw: string) {
  const date = new Date(raw);
  if (Number.isNaN(date.getTime())) return raw;
  return date.toLocaleDateString(undefined, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

function formatMs(ms: number) {
  if (ms < 1000) return `${ms} ms`;
  const seconds = ms / 1000;
  if (seconds < 60) return `${seconds.toFixed(1)} s`;
  return `${Math.round(seconds / 60)} min`;
}