import { useState } from "react";
import { disableSiteHosting, saveSiteAccess, saveSiteSettings } from "~/fns/sites";
import type { getSite } from "~/fns/sites";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

export type SiteData = Awaited<ReturnType<typeof getSite>>;
export type RepoParams = { owner: string; repo: string };
type Access = "public" | "password" | "gitfor" | "oidc";

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

const ACCESS_OPTIONS = [
  { value: "public", label: "Public" },
  { value: "password", label: "Password" },
  { value: "gitfor", label: "Sign in with this forge" },
  { value: "oidc", label: "External OpenID Connect provider" },
] as const;

const AUDIENCES = [
  { value: "readers", label: "Anyone who can read the repository" },
  { value: "members", label: "Organization members and collaborators with write access" },
] as const;

function text(form: FormData, key: string): string {
  return String(form.get(key) ?? "").trim();
}

export function SiteSourceForm({ data, params }: { data: SiteData; params: RepoParams }) {
  const save = useAction(saveSiteSettings);
  const disable = useAction(disableSiteHosting);
  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="success">Enabled</Badge>}>
      <form
        method="post"
        className="space-y-4 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          await save.run({
            data: {
              ...params,
              source,
              branch: text(form, "branch") || data.defaultBranch,
              folder: text(form, "folder"),
              artifactName: text(form, "artifactName") || "site",
              spa: form.get("spa") === "on",
              previews: form.get("previews") === "on",
              previewEnv: form.get("previewEnv") === "on",
              commitPreviews: form.get("commitPreviews") === "on",
            },
          });
        }}
      >
        <ErrorBanner message={save.error ?? disable.error} />
        <SelectField
          label="Source"
          name="source"
          options={SOURCES}
          value={source}
          onValueChange={(value) => setSource(value === "workflow" ? "workflow" : "branch")}
        />
        <SelectField
          label="Production branch"
          name="branch"
          options={branchOptions}
          defaultValue={data.site?.branch ?? data.defaultBranch}
          hint="Pushes (or successful runs) on this branch deploy to production; other branches get previews."
        />
        {source === "workflow" && (
          <TextField
            label="Artifact name"
            name="artifactName"
            defaultValue={data.site?.artifactName ?? "site"}
            hint="A .tar.gz artifact from a trusted run on the branch."
            required
          />
        )}
        <TextField
          label="Folder"
          name="folder"
          defaultValue={data.site?.folder ?? ""}
          placeholder="/ (root), dist"
          hint="Add _worker.js (a file or folder with index.js) to run a dynamic Worker; otherwise files are served statically."
        />
        <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="Branch previews"
          name="previews"
          defaultChecked={data.site?.previews ?? true}
          hint="Deploy every other branch to <branch>--<site>; open pull requests also get pr-<N>--<site>, linked on the pull request."
        />
        <CheckboxField
          label="Commit previews"
          name="commitPreviews"
          defaultChecked={data.site?.commitPreviews ?? false}
          hint="Also keep an immutable <sha7>--<site> host for each of a pull request's last 5 previewed commits."
        />
        <CheckboxField
          label="Preview variables for all writers"
          name="previewEnv"
          defaultChecked={data.site?.previewEnv ?? false}
          hint="Give previews pushed by non-admin collaborators the variables marked for previews. Off: only previews deployed by repo admins get them."
        />
        <div className="flex gap-2">
          <Button type="submit" variant="primary" pending={save.pending}>
            {data.site ? "Save" : "Enable site"}
          </Button>
          {data.site && (
            <Button variant="danger" pending={disable.pending} onClick={() => disable.run({ data: params })}>
              Unpublish and disable
            </Button>
          )}
        </div>
      </form>
    </Panel>
  );
}

export function SiteAccessForm({ data, params }: { data: SiteData; params: RepoParams }) {
  const save = useAction(saveSiteAccess);
  const site = data.site;
  const [access, setAccess] = useState<Access>(site?.access ?? "public");
  if (!site) return null;
  return (
    <Panel title="Access">
      <form
        method="post"
        className="space-y-4 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          await save.run({
            data: {
              ...params,
              access,
              audience: text(form, "audience") === "members" ? "members" : "readers",
              password: text(form, "password") || null,
              oidc:
                access === "oidc"
                  ? {
                      issuer: text(form, "issuer"),
                      clientId: text(form, "clientId"),
                      clientSecret: text(form, "clientSecret") || null,
                      allowed: text(form, "allowed"),
                    }
                  : null,
            },
          });
        }}
      >
        <ErrorBanner message={save.error} />
        <SelectField
          label="Who can view the site"
          name="access"
          options={ACCESS_OPTIONS}
          value={access}
          onValueChange={(value) => setAccess(value as Access)}
          hint="Checked before your site's code runs. Changing it signs every visitor out."
        />
        {access === "password" && (
          <TextField
            label="Password"
            name="password"
            type="password"
            autoComplete="new-password"
            placeholder={site.hasPassword ? "Leave blank to keep the current password" : ""}
          />
        )}
        {access === "gitfor" && (
          <SelectField label="Allowed visitors" name="audience" options={AUDIENCES} defaultValue={site.audience} />
        )}
        {access === "oidc" && (
          <>
            <TextField
              label="Issuer"
              name="issuer"
              defaultValue={site.oidcIssuer ?? ""}
              placeholder="https://accounts.example.com"
            />
            <TextField label="Client ID" name="clientId" defaultValue={site.oidcClientId ?? ""} />
            <TextField label="Client secret" name="clientSecret" type="password" placeholder="Leave blank to keep" />
            <TextField
              label="Allowed emails"
              name="allowed"
              defaultValue={site.oidcAllowed ?? ""}
              hint={`Comma-separated emails or @domains. Redirect URI: ${data.url ?? "<site>"}__gitfor/callback`}
            />
          </>
        )}
        <Button type="submit" variant="primary" pending={save.pending}>
          Save access
        </Button>
      </form>
    </Panel>
  );
}