import { useState } from "react";
import {
  checkSiteCustomDomain,
  deleteSiteVariable,
  deploySite,
  rollbackSiteDeployment,
  setSiteCustomDomain,
  setSiteVariable,
} from "~/fns/sites";
import { useAction } from "~/hooks/use-action";
import { Badge, EmptyState, formatBytes, Panel, RelativeTime } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { CheckboxField, ErrorBanner, TextField } from "~/components/ui/Field";
import type { RepoParams, SiteData } from "./SitesSettings";

const STATUS_TONES = {
  queued: "neutral",
  building: "amber",
  active: "green",
  failed: "red",
  superseded: "neutral",
} as const;

export function SiteEnvPanel({ data, params }: { data: SiteData; params: RepoParams }) {
  const save = useAction(setSiteVariable);
  const remove = useAction(deleteSiteVariable);
  if (!data.site) return null;
  return (
    <Panel title="Variables and secrets">
      <ul className="divide-y divide-gray-800">
        {data.env.map((entry) => (
          <li key={entry.name} className="flex items-center gap-3 px-4 py-2 text-sm">
            <code className="font-mono text-gray-200">{entry.name}</code>
            {entry.secret && <Badge tone="amber">secret</Badge>}
            <span className="ml-auto text-xs text-gray-500">
              <RelativeTime timestamp={entry.updatedAt} />
            </span>
            <Button size="sm" variant="danger" onClick={() => remove.run({ data: { ...params, name: entry.name } })}>
              Delete
            </Button>
          </li>
        ))}
      </ul>
      <form
        className="space-y-3 border-t border-gray-800 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const ok = await save.run({
            data: {
              ...params,
              name: String(form.get("name") ?? "").trim(),
              value: String(form.get("value") ?? ""),
              secret: form.get("secret") === "on",
            },
          });
          if (ok) element.reset();
        }}
      >
        <ErrorBanner message={save.error ?? remove.error} />
        <TextField label="Name" name="name" placeholder="API_URL" required />
        <TextField label="Value" name="value" />
        <CheckboxField
          label="Secret"
          name="secret"
          hint="Secrets are write-only; both are available on the Worker env."
        />
        <Button type="submit" pending={save.pending}>
          Save variable
        </Button>
      </form>
    </Panel>
  );
}

export function SiteDomainPanel({ data, params }: { data: SiteData; params: RepoParams }) {
  const update = useAction(setSiteCustomDomain);
  const check = useAction(checkSiteCustomDomain);
  const [details, setDetails] = useState<Awaited<ReturnType<typeof checkSiteCustomDomain>>>(null);
  const site = data.site;
  if (!site) return null;
  if (!data.customDomainsEnabled) {
    return (
      <Panel title="Custom domain">
        <p className="p-4 text-sm text-gray-500">Custom domains are not configured on this forge.</p>
      </Panel>
    );
  }
  return (
    <Panel
      title="Custom domain"
      actions={
        site.domainStatus && (
          <Badge tone={site.domainStatus === "active" ? "green" : "amber"}>{site.domainStatus}</Badge>
        )
      }
    >
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const domain = String(new FormData(event.currentTarget).get("domain") ?? "").trim();
          await update.run({ data: { ...params, domain: domain || null } });
        }}
      >
        <ErrorBanner message={update.error ?? check.error} />
        <TextField
          label="Domain"
          name="domain"
          defaultValue={site.customDomain ?? ""}
          placeholder="app.example.com"
          hint="CNAME it to the forge's SaaS fallback origin and add the TXT records shown after checking."
        />
        <div className="flex gap-2">
          <Button type="submit" variant="primary" pending={update.pending}>
            Save domain
          </Button>
          {site.customDomain && (
            <Button
              pending={check.pending}
              onClick={async () => setDetails((await check.run({ data: params })) ?? null)}
            >
              Check status
            </Button>
          )}
        </div>
        {details && (
          <div className="space-y-1 rounded-md border border-gray-800 bg-gray-900/60 p-3 text-xs text-gray-400">
            <div>Status: {details.status}</div>
            {details.records.map((record) => (
              <div key={record.name} className="font-mono">
                {record.type} {record.name} = {record.value}
              </div>
            ))}
          </div>
        )}
      </form>
    </Panel>
  );
}

export function SiteDeploymentsPanel({ data, params }: { data: SiteData; params: RepoParams }) {
  const deploy = useAction(deploySite);
  const rollback = useAction(rollbackSiteDeployment);
  if (!data.site) return null;
  const activeId = data.site.activeDeploymentId;
  return (
    <Panel
      title={
        data.usage
          ? `Deployments · today ${data.usage.requests} requests, ${data.usage.cpuMs} CPU ms, ${formatBytes(data.usage.bytesOut)} out`
          : "Deployments"
      }
      actions={
        <Button size="sm" pending={deploy.pending} onClick={() => deploy.run({ data: params })}>
          Deploy now
        </Button>
      }
    >
      <ErrorBanner message={deploy.error ?? rollback.error} />
      {data.deployments.length === 0 ? (
        <EmptyState title="No deployments yet" />
      ) : (
        <ul className="divide-y divide-gray-800">
          {data.deployments.map((row) => (
            <li key={row.id} className="flex flex-wrap items-center gap-3 px-4 py-2.5 text-sm">
              <Badge tone={STATUS_TONES[row.status]}>{row.status}</Badge>
              <span className="text-gray-200">
                {row.environment === "preview" ? `Preview ${row.branch}` : "Production"}
              </span>
              <code className="font-mono text-xs text-gray-500">
                {row.ref}@{row.sha.slice(0, 7)}
              </code>
              <span className="text-xs text-gray-500">{row.kind === "worker" ? "worker" : "static"}</span>
              {row.fileCount > 0 && (
                <span className="text-xs text-gray-500">
                  {row.fileCount} files, {formatBytes(row.totalBytes)}
                </span>
              )}
              {row.error && <span className="w-full text-xs text-red-300">{row.error}</span>}
              <span className="ml-auto text-xs text-gray-500">
                <RelativeTime timestamp={row.createdAt} />
              </span>
              {row.status === "active" && row.url && (
                <a href={row.url} target="_blank" rel="noreferrer" className="text-xs text-accent-400 hover:underline">
                  Visit
                </a>
              )}
              {row.environment === "production" && row.status === "superseded" && row.id !== activeId && (
                <Button size="sm" onClick={() => rollback.run({ data: { ...params, deploymentId: row.id } })}>
                  Roll back
                </Button>
              )}
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}