"use client";
import * as React from "react";
import { Braces } from "lucide-react";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { Segmented } from "@/components/ui/segmented";
import { Switch } from "@/components/ui/switch";
import type { ChatSettings } from "./model-config";
import { cn } from "@/lib/utils";

type FormatMode = "text" | "json" | "json_schema";

const DEFAULT_SCHEMA = '{\n  "type": "object",\n  "properties": {\n    "answer": { "type": "string" }\n  },\n  "required": ["answer"],\n  "additionalProperties": false\n}';

/** Structured output: JSON object / JSON schema (with an editor) — only offered when the model supports it. */
export function StructuredOutputSheet({ open, onOpenChange, settings, onChange }: { open: boolean; onOpenChange: (o: boolean) => void; settings: ChatSettings; onChange: (s: ChatSettings) => void }) {
  const [mode, setMode] = React.useState<FormatMode>(settings.responseFormat?.type ?? "text");
  const [schemaText, setSchemaText] = React.useState(() => (settings.responseFormat?.schema ? JSON.stringify(settings.responseFormat.schema, null, 2) : DEFAULT_SCHEMA));
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    if (open) {
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setMode(settings.responseFormat?.type ?? "text");
      setSchemaText(settings.responseFormat?.schema ? JSON.stringify(settings.responseFormat.schema, null, 2) : DEFAULT_SCHEMA);
      setError(null);
    }
  }, [open, settings.responseFormat]);

  const apply = () => {
    const next = { ...settings };
    if (mode === "text") {
      delete next.responseFormat;
    } else if (mode === "json") {
      next.responseFormat = { type: "json" };
    } else {
      try {
        const parsed = JSON.parse(schemaText);
        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error("Schema must be a JSON object");
        next.responseFormat = { type: "json_schema", schema: parsed, strict: true };
      } catch (e) {
        setError((e as Error).message);
        return;
      }
    }
    onChange(next);
    onOpenChange(false);
  };

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title={
        <span className="inline-flex items-center gap-2">
          <Braces className="size-4" /> Structured output
        </span>
      }
      description="Ask the model to answer with JSON. Strict schema mode validates the shape when the provider supports it."
      size="md"
      footer={
        <div className="flex gap-2 sm:justify-end">
          <Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button className="flex-1 sm:flex-none" onClick={apply}>
            Apply
          </Button>
        </div>
      }
    >
      <div className="space-y-4 pt-1">
        <Segmented<FormatMode> value={mode} onChange={setMode} fill ariaLabel="Response format" options={[{ value: "text", label: "Text" }, { value: "json", label: "JSON object" }, { value: "json_schema", label: "JSON schema" }]} />
        {mode === "json_schema" ? (
          <div className="space-y-1.5">
            <Textarea
              value={schemaText}
              onChange={(e) => {
                setSchemaText(e.target.value);
                try {
                  JSON.parse(e.target.value);
                  setError(null);
                } catch (err) {
                  setError((err as Error).message);
                }
              }}
              className={cn("min-h-[220px] font-mono text-[12.5px] leading-5", error && "border-danger focus:border-danger")}
              spellCheck={false}
              aria-label="JSON schema"
            />
            {error ? <p className="text-xs text-danger">{error}</p> : <p className="text-xs text-fg-subtle">Object root; keep `additionalProperties: false` for strict mode.</p>}
          </div>
        ) : mode === "json" ? (
          <p className="text-[13px] text-fg-muted">The model returns a single JSON object. Mention the keys you expect in your prompt.</p>
        ) : (
          <p className="text-[13px] text-fg-muted">Plain Markdown answers (default).</p>
        )}
      </div>
    </ResponsiveDialog>
  );
}

/** System prompt editor (conversation-level instructions). */
export function SystemPromptSheet({ open, onOpenChange, value, onChange, projectInstructions }: { open: boolean; onOpenChange: (o: boolean) => void; value: string; onChange: (v: string) => void; projectInstructions?: string | null }) {
  const [draft, setDraft] = React.useState(value);
  React.useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    if (open) setDraft(value);
  }, [open, value]);
  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={onOpenChange}
      title="System prompt"
      description="Instructions that apply to the whole conversation. They are sent before every message."
      size="md"
      snap="half"
      footer={
        <div className="flex items-center gap-2">
          <span className="text-[12px] tabular-nums text-fg-subtle">{draft.length.toLocaleString()} chars</span>
          <div className="flex-1" />
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button
            onClick={() => {
              onChange(draft);
              onOpenChange(false);
            }}
          >
            Save
          </Button>
        </div>
      }
    >
      <div className="space-y-3 pt-1">
        {projectInstructions ? (
          <div className="rounded-lg bg-bg-subtle px-3 py-2 text-[12.5px] text-fg-muted">
            <span className="font-medium text-fg">Project instructions</span> are prepended automatically:
            <p className="mt-1 line-clamp-3 whitespace-pre-wrap">{projectInstructions}</p>
          </div>
        ) : null}
        <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="You are a concise assistant that answers in French…" className="min-h-[180px]" autoFocus />
      </div>
    </ResponsiveDialog>
  );
}

const BUILTIN_TOOLS: { id: string; label: string; description: string }[] = [
  { id: "calculator", label: "Calculator", description: "Exact arithmetic for any non-trivial math." },
  { id: "clock", label: "Clock", description: "Current date and time in any time zone." },
  { id: "random", label: "Random", description: "Cryptographically secure random integers." },
];

/** Built-in PolyLLM tools (run server-side, side-effect free) — toggles mirror `settings.tools`. */
export function ToolsSheet({ open, onOpenChange, settings, onChange, supported }: { open: boolean; onOpenChange: (o: boolean) => void; settings: ChatSettings; onChange: (s: ChatSettings) => void; supported: boolean }) {
  const on = new Set(settings.tools ?? []);
  const toggle = (id: string) => {
    const next = new Set(on);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    const tools = [...next];
    const out = { ...settings };
    if (tools.length) out.tools = tools;
    else {
      delete out.tools;
      delete out.toolChoice;
    }
    onChange(out);
  };
  return (
    <ResponsiveDialog open={open} onOpenChange={onOpenChange} title="Tools" description={supported ? "Built-in PolyLLM tools the model may call. They run server-side and have no side effects." : "This model does not support tool calling."} size="sm">
      <ul className="divide-y divide-hairline pt-1">
        {BUILTIN_TOOLS.map((t) => (
          <li key={t.id} className="flex min-h-[52px] items-center gap-3 py-2">
            <span className="min-w-0 flex-1">
              <span className="block text-[14px] font-medium">{t.label}</span>
              <span className="block text-[12px] text-fg-muted">{t.description}</span>
            </span>
            <Switch checked={on.has(t.id)} onCheckedChange={() => toggle(t.id)} disabled={!supported} aria-label={`Enable ${t.label}`} />
          </li>
        ))}
      </ul>
    </ResponsiveDialog>
  );
}