import { useState } from "react";
import { Button } from "~/ui/Button";
import { TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";

type Item = {
  name: string;
  value?: string;
  updatedAt: number;
  detail?: string;
  /** Extra form fields resubmitted unchanged when only the value is edited (e.g. an owner value's access policy). */
  keep?: Record<string, string>;
};

type Props = {
  title: string;
  kind: "secret" | "variable";
  items: Item[];
  pending: boolean;
  error: string | null;
  onSave: (name: string, value: string, form: FormData) => Promise<boolean>;
  onDelete: (name: string) => void;
  extraFields?: React.ReactNode;
  description?: React.ReactNode;
};

function ValueField({
  kind,
  editing,
  defaultValue,
}: {
  kind: Props["kind"];
  editing?: boolean;
  defaultValue?: string;
}) {
  return kind === "secret" ? (
    <TextAreaField
      label={editing ? "New value" : "Value"}
      name="value"
      rows={2}
      required
      hint={editing ? "The current value can't be shown; saving replaces it." : undefined}
    />
  ) : (
    <TextField label="Value" name="value" required defaultValue={defaultValue} />
  );
}

/** Edits one value in place; the name is fixed, so renaming means removing it and adding a new one. */
function EditRow({
  item,
  kind,
  pending,
  onSave,
  onDone,
}: {
  item: Item;
  kind: Props["kind"];
  pending: boolean;
  onSave: Props["onSave"];
  onDone: () => void;
}) {
  return (
    <li className="px-4 py-3">
      <form
        className="space-y-3"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          if (await onSave(item.name, String(form.get("value") ?? ""), form)) onDone();
        }}
      >
        <code className="font-mono text-sm text-kumo-strong">{item.name}</code>
        {Object.entries(item.keep ?? {}).map(([name, value]) => (
          <input key={name} type="hidden" name={name} value={value} />
        ))}
        <ValueField kind={kind} editing defaultValue={item.value ?? ""} />
        <div className="flex gap-2">
          <Button type="submit" size="sm" variant="primary" pending={pending}>
            Update {kind}
          </Button>
          <Button type="button" size="sm" onClick={onDone}>
            Cancel
          </Button>
        </div>
      </form>
    </li>
  );
}

/** Add/list/edit/remove panel shared by repository, environment and owner secrets and variables. */
export function ConfigValueList({
  title,
  kind,
  items,
  pending,
  error,
  onSave,
  onDelete,
  extraFields,
  description,
}: Props) {
  const [editing, setEditing] = useState<string | null>(null);
  return (
    <Panel title={title}>
      <form
        className="space-y-3 border-b border-kumo-hairline p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const element = event.currentTarget;
          const form = new FormData(element);
          const ok = await onSave(String(form.get("name") ?? ""), String(form.get("value") ?? ""), form);
          if (ok) element.reset();
        }}
      >
        <ErrorBanner message={error} />
        <div className="grid gap-3 md:grid-cols-[1fr_2fr]">
          <TextField label="Name" name="name" required placeholder={kind === "secret" ? "DEPLOY_TOKEN" : "REGION"} />
          <ValueField kind={kind} />
        </div>
        {extraFields}
        {description ? <p className="text-xs text-kumo-subtle">{description}</p> : null}
        <Button type="submit" size="sm" variant="primary" pending={pending}>
          Save {kind}
        </Button>
      </form>
      {items.length === 0 ? (
        <EmptyState title={`No ${kind}s`} icon="key" />
      ) : (
        <ul className="divide-y divide-kumo-hairline">
          {items.map((item) =>
            editing === item.name ? (
              <EditRow
                key={item.name}
                item={item}
                kind={kind}
                pending={pending}
                onSave={onSave}
                onDone={() => setEditing(null)}
              />
            ) : (
              <li key={item.name} className="flex items-center gap-3 px-4 py-2.5">
                <code className="font-mono text-sm text-kumo-strong">{item.name}</code>
                {item.value !== undefined && (
                  <code className="min-w-0 truncate font-mono text-xs text-kumo-subtle">{item.value}</code>
                )}
                {item.detail && <span className="text-xs text-kumo-subtle">{item.detail}</span>}
                <span className="ml-auto shrink-0 text-xs text-kumo-subtle">
                  Updated <RelativeTime timestamp={item.updatedAt} />
                </span>
                <Button size="sm" onClick={() => setEditing(item.name)}>
                  Edit
                </Button>
                <Button size="sm" variant="danger" onClick={() => onDelete(item.name)}>
                  Remove
                </Button>
              </li>
            ),
          )}
        </ul>
      )}
    </Panel>
  );
}