import { useState } from "react";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

export type AdvisoryValues = {
  title: string;
  description: string;
  severity: "low" | "moderate" | "high" | "critical";
  cveId: string | null;
  cweIds: string | null;
  ecosystem: "npm" | "pip" | "go" | "cargo" | "rubygems" | "composer" | "other" | null;
  packageName: string | null;
  affectedVersions: string | null;
  patchedVersions: string | null;
};

const SEVERITIES = [
  { value: "low", label: "Low" },
  { value: "moderate", label: "Moderate" },
  { value: "high", label: "High" },
  { value: "critical", label: "Critical" },
] as const;

const ECOSYSTEMS = [
  { value: "", label: "Not specified" },
  { value: "npm", label: "npm" },
  { value: "pip", label: "pip" },
  { value: "go", label: "Go" },
  { value: "cargo", label: "Cargo" },
  { value: "rubygems", label: "RubyGems" },
  { value: "composer", label: "Composer" },
  { value: "other", label: "Other" },
] as const;

function severityOf(value: FormDataEntryValue | null): AdvisoryValues["severity"] {
  return SEVERITIES.find((option) => option.value === value)?.value ?? "moderate";
}

function ecosystemOf(value: FormDataEntryValue | null): AdvisoryValues["ecosystem"] {
  const match = ECOSYSTEMS.find((option) => option.value === value)?.value;
  return match ? match : null;
}

function text(form: FormData, name: string): string | null {
  const value = String(form.get(name) ?? "").trim();
  return value || null;
}

export function AdvisoryForm({
  owner,
  repo,
  initial,
  submitLabel,
  pending,
  error,
  onSubmit,
}: {
  owner: string;
  repo: string;
  initial: AdvisoryValues | null;
  submitLabel: string;
  pending: boolean;
  error: string | null;
  onSubmit: (values: AdvisoryValues) => void;
}) {
  const [description, setDescription] = useState(initial?.description ?? "");
  return (
    <form
      className="space-y-4 p-4"
      onSubmit={(event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        onSubmit({
          title: String(form.get("title") ?? ""),
          description,
          severity: severityOf(form.get("severity")),
          cveId: text(form, "cveId"),
          cweIds: text(form, "cweIds"),
          ecosystem: ecosystemOf(form.get("ecosystem")),
          packageName: text(form, "packageName"),
          affectedVersions: text(form, "affectedVersions"),
          patchedVersions: text(form, "patchedVersions"),
        });
      }}
    >
      <ErrorBanner message={error} />
      <TextField label="Title" name="title" required defaultValue={initial?.title} />
      <MarkdownEditor
        label="Description"
        value={description}
        onChange={setDescription}
        owner={owner}
        repo={repo}
        rows={10}
        placeholder="Impact, affected code paths, steps to reproduce, and any workarounds"
      />
      <div className="grid gap-3 md:grid-cols-3">
        <SelectField
          label="Severity"
          name="severity"
          options={SEVERITIES}
          defaultValue={initial?.severity ?? "moderate"}
        />
        <TextField label="CVE ID" name="cveId" placeholder="CVE-2026-1234" defaultValue={initial?.cveId ?? ""} />
        <TextField label="CWE IDs" name="cweIds" placeholder="CWE-79, CWE-89" defaultValue={initial?.cweIds ?? ""} />
      </div>
      <div className="grid gap-3 md:grid-cols-2">
        <SelectField label="Ecosystem" name="ecosystem" options={ECOSYSTEMS} defaultValue={initial?.ecosystem ?? ""} />
        <TextField label="Package name" name="packageName" defaultValue={initial?.packageName ?? ""} />
        <TextField
          label="Affected versions"
          name="affectedVersions"
          placeholder="< 1.4.2"
          defaultValue={initial?.affectedVersions ?? ""}
        />
        <TextField
          label="Patched versions"
          name="patchedVersions"
          placeholder="1.4.2"
          defaultValue={initial?.patchedVersions ?? ""}
        />
      </div>
      <Button type="submit" variant="primary" pending={pending}>
        {submitLabel}
      </Button>
    </form>
  );
}