import { useState } from "react";
import { checkPagesDomain, disablePages, savePages, setPagesDomain } from "~/fns/pages";
import type { getPages } from "~/fns/pages";
import { useAction } from "~/hooks/use-action";
import { Badge, Panel } from "~/components/ui/Primitives";
import { Button } from "~/components/ui/Button";
import { CheckboxField, ErrorBanner, SelectField, TextField } from "~/components/ui/Field";

export type PagesData = Awaited<ReturnType<typeof getPages>>;
type RepoParams = { owner: string; repo: string };

const SOURCES = [
  { value: "branch", label: "Deploy from a branch" },
  { value: "workflow", label: "Deploy from a workflow artifact" },
] as const;

export function PagesSourceForm({ data, params }: { data: PagesData; params: RepoParams }) {
  const save = useAction(savePages);
  const disable = useAction(disablePages);
  const [source, setSource] = useState<"branch" | "workflow">(data.site?.source ?? "branch");
  const branchOptions = (data.branches.length ? data.branches : [data.defaultBranch]).map((name) => ({
    value: name,
    label: name,
  }));
  return (
    <Panel title="Build and deployment" actions={data.site && <Badge tone="green">Enabled</Badge>}>
      <form
        className="space-y-4 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          await save.run({
            data: {
              ...params,
              source,
              branch: String(form.get("branch") ?? data.defaultBranch),
              folder: String(form.get("folder") ?? ""),
              artifactName: String(form.get("artifactName") ?? "pages"),
              spa: form.get("spa") === "on",
              previews: form.get("previews") === "on",
            },
          });
        }}
      >
        <ErrorBanner message={save.error ?? disable.error} />
        <SelectField
          label="Source"
          name="source"
          options={SOURCES}
          value={source}
          onChange={(event) => setSource(event.target.value === "workflow" ? "workflow" : "branch")}
        />
        <SelectField
          label="Branch"
          name="branch"
          options={branchOptions}
          defaultValue={data.site?.branch ?? data.defaultBranch}
          hint={
            source === "branch"
              ? "Pushes to this branch deploy to production."
              : "Successful runs on this branch deploy to production."
          }
        />
        {source === "workflow" && (
          <TextField
            label="Artifact name"
            name="artifactName"
            defaultValue={data.site?.artifactName ?? "pages"}
            hint='A .tar.gz uploaded with "::gitfor::artifact <name> <path>".'
            required
          />
        )}
        <TextField
          label="Folder"
          name="folder"
          defaultValue={data.site?.folder ?? ""}
          placeholder="/ (root), docs, dist"
          hint="Directory inside the branch or artifact to publish."
        />
        <CheckboxField
          label="Single-page app fallback"
          name="spa"
          defaultChecked={data.site?.spa ?? false}
          hint="Serve index.html for unknown paths instead of 404.html."
        />
        <CheckboxField
          label="Pull request previews"
          name="previews"
          defaultChecked={data.site?.previews ?? true}
          hint="Deploy same-repository pull request heads to /_pr/<number>/."
        />
        <div className="flex gap-2">
          <Button type="submit" variant="primary" pending={save.pending}>
            {data.site ? "Save" : "Enable Pages"}
          </Button>
          {data.site && (
            <Button variant="danger" pending={disable.pending} onClick={() => disable.run({ data: params })}>
              Unpublish and disable
            </Button>
          )}
        </div>
      </form>
    </Panel>
  );
}

export function PagesDomainForm({ data, params }: { data: PagesData; params: RepoParams }) {
  const update = useAction(setPagesDomain);
  const check = useAction(checkPagesDomain);
  const [details, setDetails] = useState<Awaited<ReturnType<typeof checkPagesDomain>>>(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="docs.example.com"
          hint="Point a CNAME at this forge's Pages domain, then check the status."
        />
        <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.errors.map((error) => (
              <div key={error} className="text-amber-300">
                {error}
              </div>
            ))}
            {details.verification && (
              <div className="font-mono">
                {details.verification.type.toUpperCase()} {details.verification.name} = {details.verification.value}
              </div>
            )}
          </div>
        )}
      </form>
    </Panel>
  );
}