import { useState } from "react";
import { deleteAiEndpoint, saveAiEndpoint } from "~/fns/ai-endpoints";
import { useAction } from "~/hooks/use-action";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

type Kind = "provider" | "openai" | "cf-gateway";

export type AiEndpointSummaryView = {
  kind: Kind;
  provider: string | null;
  model: string;
  baseUrl: string | null;
  cfAccountId: string | null;
  cfGatewayId: string | null;
};

export type AiEndpointTarget =
  | { scope: "repo"; owner: string; repo: string }
  | { scope: "account"; org: string | null };

const KIND_LABELS: Record<Kind, string> = {
  provider: "Provider key (through this instance's AI Gateway)",
  openai: "OpenAI-compatible endpoint",
  "cf-gateway": "My Cloudflare AI Gateway",
};

function describe(endpoint: AiEndpointSummaryView): string {
  if (endpoint.kind === "openai") return `${endpoint.model} at ${endpoint.baseUrl}`;
  if (endpoint.kind === "cf-gateway")
    return `${endpoint.provider}/${endpoint.model} via gateway ${endpoint.cfGatewayId}`;
  return `${endpoint.provider}/${endpoint.model}`;
}

/** Bring-your-own AI endpoint for an account or a repository. The saved key is never shown again. */
export function AiEndpointForm({
  title,
  target,
  endpoint,
  providers,
  fallback,
}: {
  title: string;
  target: AiEndpointTarget;
  endpoint: AiEndpointSummaryView | null;
  providers: readonly string[];
  fallback: string;
}) {
  const save = useAction(saveAiEndpoint);
  const remove = useAction(deleteAiEndpoint);
  const [kind, setKind] = useState<Kind>(endpoint?.kind ?? "provider");
  const [provider, setProvider] = useState(endpoint?.provider ?? providers[0] ?? "openai");
  const [model, setModel] = useState(endpoint?.model ?? "");
  const [baseUrl, setBaseUrl] = useState(endpoint?.baseUrl ?? "");
  const [cfAccountId, setCfAccountId] = useState(endpoint?.cfAccountId ?? "");
  const [cfGatewayId, setCfGatewayId] = useState(endpoint?.cfGatewayId ?? "");
  const [apiKey, setApiKey] = useState("");
  return (
    <Panel title={title}>
      <form
        method="post"
        className="space-y-4 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const saved = await save.run({
            data: { target, kind, provider, model, baseUrl, cfAccountId, cfGatewayId, apiKey },
          });
          if (saved) setApiKey("");
        }}
      >
        <ErrorBanner message={save.error ?? remove.error} />
        <p className="text-sm text-kumo-subtle">
          {endpoint
            ? `Using ${describe(endpoint)}. Calls with your own endpoint are recorded but never count toward plan limits or prepaid credit.`
            : fallback}
        </p>
        <SelectField
          label="Endpoint"
          value={kind}
          options={(Object.keys(KIND_LABELS) as Kind[]).map((value) => ({ value, label: KIND_LABELS[value] }))}
          onValueChange={(value) => setKind(value as Kind)}
        />
        <div className="grid gap-4 sm:grid-cols-3">
          {kind !== "openai" && (
            <SelectField
              label="Provider"
              value={provider}
              options={providers.map((value) => ({ value, label: value }))}
              onValueChange={(value) => setProvider(value)}
            />
          )}
          {kind === "openai" && (
            <TextField
              label="Base URL"
              hint="Public https URL; /chat/completions is appended"
              value={baseUrl}
              placeholder="https://api.example.com/v1"
              onChange={(event) => setBaseUrl(event.target.value)}
            />
          )}
          {kind === "cf-gateway" && (
            <>
              <TextField
                label="Cloudflare account id"
                value={cfAccountId}
                onChange={(event) => setCfAccountId(event.target.value)}
              />
              <TextField
                label="AI Gateway id"
                value={cfGatewayId}
                onChange={(event) => setCfGatewayId(event.target.value)}
              />
            </>
          )}
          <TextField
            label="Model"
            value={model}
            placeholder="gpt-4.1-mini"
            onChange={(event) => setModel(event.target.value)}
          />
          <TextField
            label="API key"
            type="password"
            autoComplete="off"
            hint={endpoint ? "Enter the key again to change any setting" : undefined}
            value={apiKey}
            onChange={(event) => setApiKey(event.target.value)}
          />
        </div>
        <div className="flex gap-2">
          <Button type="submit" variant="primary" pending={save.pending} disabled={!model || !apiKey}>
            Save endpoint
          </Button>
          {endpoint && (
            <Button variant="danger" pending={remove.pending} onClick={() => remove.run({ data: { target } })}>
              Remove
            </Button>
          )}
        </div>
      </form>
    </Panel>
  );
}