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 };

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;
};

/** Add/list/remove panel shared by repository, environment and owner secrets and variables. */
export function ConfigValueList({ title, kind, items, pending, error, onSave, onDelete, extraFields }: Props) {
  return (
    <Panel title={title}>
      <form
        className="space-y-3 border-b border-gray-800 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"} />
          {kind === "secret" ? (
            <TextAreaField label="Value" name="value" rows={2} required />
          ) : (
            <TextField label="Value" name="value" required />
          )}
        </div>
        {extraFields}
        <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-gray-800">
          {items.map((item) => (
            <li key={item.name} className="flex items-center gap-3 px-4 py-2.5">
              <code className="font-mono text-sm text-gray-100">{item.name}</code>
              {item.value !== undefined && (
                <code className="min-w-0 truncate font-mono text-xs text-gray-400">{item.value}</code>
              )}
              {item.detail && <span className="text-xs text-gray-500">{item.detail}</span>}
              <span className="ml-auto shrink-0 text-xs text-gray-500">
                Updated <RelativeTime timestamp={item.updatedAt} />
              </span>
              <Button size="sm" variant="danger" onClick={() => onDelete(item.name)}>
                Remove
              </Button>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}