import { type Dispatch, type SetStateAction } from "react";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { ScrollArea } from "../ui/scroll-area";
import { Bot, Eye, EyeOff, Key, Sparkles } from "lucide-react";

type AiSettingsTabProps = {
  localOpenRouterUrl: string;
  setLocalOpenRouterUrl: Dispatch<SetStateAction<string>>;
  localOpenRouterKey: string;
  setLocalOpenRouterKey: Dispatch<SetStateAction<string>>;
  localOpenRouterModel: string;
  setLocalOpenRouterModel: Dispatch<SetStateAction<string>>;
  localOpenRouterSiteUrl: string;
  setLocalOpenRouterSiteUrl: Dispatch<SetStateAction<string>>;
  localOpenRouterAppName: string;
  setLocalOpenRouterAppName: Dispatch<SetStateAction<string>>;
  localOpenRouterSystemPrompt: string;
  setLocalOpenRouterSystemPrompt: Dispatch<SetStateAction<string>>;
  localOpenRouterTemperature: string;
  setLocalOpenRouterTemperature: Dispatch<SetStateAction<string>>;
  localOpenRouterMaxTokens: string;
  setLocalOpenRouterMaxTokens: Dispatch<SetStateAction<string>>;
  showOpenRouterKey: boolean;
  setShowOpenRouterKey: Dispatch<SetStateAction<boolean>>;
  onSave: () => void;
  onClearKey: () => void;
  openRouterConfigured: boolean;
};

export function AiSettingsTab(props: AiSettingsTabProps) {
  const {
    localOpenRouterUrl,
    setLocalOpenRouterUrl,
    localOpenRouterKey,
    setLocalOpenRouterKey,
    localOpenRouterModel,
    setLocalOpenRouterModel,
    localOpenRouterSiteUrl,
    setLocalOpenRouterSiteUrl,
    localOpenRouterAppName,
    setLocalOpenRouterAppName,
    localOpenRouterSystemPrompt,
    setLocalOpenRouterSystemPrompt,
    localOpenRouterTemperature,
    setLocalOpenRouterTemperature,
    localOpenRouterMaxTokens,
    setLocalOpenRouterMaxTokens,
    showOpenRouterKey,
    setShowOpenRouterKey,
    onSave,
    onClearKey,
    openRouterConfigured,
  } = props;

  return (
    <div className="flex-1 m-0 overflow-hidden">
      <ScrollArea className="h-full">
        <div className="mx-auto max-w-2xl space-y-6 p-6">
          <section className="rounded border border-border bg-card overflow-hidden">
            <div className="border-b border-border px-5 py-4">
              <div className="flex items-center gap-2">
                <Bot className="h-4 w-4 text-primary" />
                <h3 className="text-sm font-semibold">OpenRouter Provider</h3>
              </div>
              <p className="mt-1 text-body-sm text-muted-foreground">
                Configure your OpenRouter endpoint, key, and model defaults for
                SQL assistant chat.
              </p>
            </div>
            <div className="p-5 space-y-4">
              <div className="space-y-1.5">
                <label className="text-body-sm font-medium text-muted-foreground">
                  OpenRouter URL
                </label>
                <Input
                  value={localOpenRouterUrl}
                  onChange={(e) => setLocalOpenRouterUrl(e.target.value)}
                  placeholder="https://openrouter.ai/api/v1/chat/completions"
                  className="font-mono text-body-sm"
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-body-sm font-medium text-muted-foreground">
                  API Key
                </label>
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <Key className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                    <Input
                      type={showOpenRouterKey ? "text" : "password"}
                      value={localOpenRouterKey}
                      onChange={(e) => setLocalOpenRouterKey(e.target.value)}
                      placeholder="sk-or-v1-..."
                      className="pl-8 pr-9 font-mono text-body-sm"
                    />
                    <button
                      type="button"
                      onClick={() => setShowOpenRouterKey(!showOpenRouterKey)}
                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showOpenRouterKey ? (
                        <EyeOff className="h-3.5 w-3.5" />
                      ) : (
                        <Eye className="h-3.5 w-3.5" />
                      )}
                    </button>
                  </div>
                  <Button variant="outline" size="sm" onClick={onClearKey}>
                    Clear
                  </Button>
                </div>
              </div>

              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Model
                  </label>
                  <Input
                    value={localOpenRouterModel}
                    onChange={(e) => setLocalOpenRouterModel(e.target.value)}
                    placeholder="openai/gpt-4o-mini"
                    className="font-mono text-body-sm"
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    App Name (X-Title)
                  </label>
                  <Input
                    value={localOpenRouterAppName}
                    onChange={(e) => setLocalOpenRouterAppName(e.target.value)}
                    placeholder="Athena SQL Editor"
                    className="text-body-sm"
                  />
                </div>
              </div>

              <div className="space-y-1.5">
                <label className="text-body-sm font-medium text-muted-foreground">
                  Site URL (HTTP-Referer)
                </label>
                <Input
                  value={localOpenRouterSiteUrl}
                  onChange={(e) => setLocalOpenRouterSiteUrl(e.target.value)}
                  placeholder="http://localhost:3000"
                  className="font-mono text-body-sm"
                />
              </div>
            </div>
          </section>

          <section className="rounded border border-border bg-card overflow-hidden">
            <div className="border-b border-border px-5 py-4">
              <div className="flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-primary" />
                <h3 className="text-sm font-semibold">Model Behavior</h3>
              </div>
              <p className="mt-1 text-body-sm text-muted-foreground">
                Tune generation defaults and the SQL assistant system prompt.
              </p>
            </div>
            <div className="p-5 space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Temperature
                  </label>
                  <Input
                    type="number"
                    min={0}
                    max={2}
                    step={0.1}
                    value={localOpenRouterTemperature}
                    onChange={(e) =>
                      setLocalOpenRouterTemperature(e.target.value)
                    }
                    className="font-mono text-body-sm"
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-body-sm font-medium text-muted-foreground">
                    Max Tokens
                  </label>
                  <Input
                    type="number"
                    min={128}
                    max={32768}
                    step={1}
                    value={localOpenRouterMaxTokens}
                    onChange={(e) => setLocalOpenRouterMaxTokens(e.target.value)}
                    className="font-mono text-body-sm"
                  />
                </div>
              </div>

              <div className="space-y-1.5">
                <label className="text-body-sm font-medium text-muted-foreground">
                  System Prompt
                </label>
                <textarea
                  value={localOpenRouterSystemPrompt}
                  onChange={(e) =>
                    setLocalOpenRouterSystemPrompt(e.target.value)
                  }
                  className="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                  placeholder="You are a SQL assistant..."
                />
              </div>

              <div className="flex items-center gap-3">
                <Button size="sm" onClick={onSave}>
                  Save AI settings
                </Button>
                {openRouterConfigured ? (
                  <Badge variant="success">AI chat ready</Badge>
                ) : (
                  <Badge variant="warning">Add key + model to enable chat</Badge>
                )}
              </div>
            </div>
          </section>
        </div>
      </ScrollArea>
    </div>
  );
}
