import { optionLabel } from "~/lib/issue-templates";
import type { IssueFormField } from "~/lib/issue-templates";
import { Select as KumoSelect } from "@cloudflare/kumo/components/select";
import { Markdown } from "~/ui/Markdown";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";

type Answers = Record<string, string | string[]>;
type Props = { fields: IssueFormField[]; answers: Answers; onChange: (answers: Answers) => void; markdown: string[] };

function Label({ htmlFor, text, required }: { htmlFor: string; text: string; required: boolean }) {
  return (
    <label htmlFor={htmlFor} className="block text-sm font-medium text-kumo-default">
      {text}
      {required && <span className="ml-1 text-kumo-danger">*</span>}
    </label>
  );
}

/** Renders a `.gitfor/ISSUE_TEMPLATE` issue form; `markdown` holds server-rendered HTML for markdown blocks. */
export function IssueForm({ fields, answers, onChange, markdown }: Props) {
  const set = (key: string, value: string | string[]) => onChange({ ...answers, [key]: value });
  let markdownIndex = 0;
  return (
    <div className="space-y-5">
      {fields.map((field, index) => {
        if (field.type === "markdown") {
          const html = markdown[markdownIndex++] ?? "";
          return <Markdown key={`md:${html}`} html={html} className="text-sm" />;
        }
        const key = field.id ?? `field-${index}`;
        const id = `issue-form-${key}`;
        const description = field.attributes.description && (
          <p className="text-xs text-kumo-subtle">{field.attributes.description}</p>
        );
        if (field.type === "checkboxes") {
          const checked = new Set(Array.isArray(answers[key]) ? answers[key] : []);
          return (
            <fieldset key={key} className="space-y-1.5">
              <legend className="text-sm font-medium text-kumo-default">{field.attributes.label}</legend>
              {description}
              {field.attributes.options.map((option) => {
                const label = optionLabel(option);
                return (
                  <label key={label} className="flex items-center gap-2 text-sm text-kumo-default">
                    <input
                      type="checkbox"
                      className="accent-accent-500"
                      checked={checked.has(label)}
                      onChange={(event) => {
                        const next = new Set(checked);
                        if (event.target.checked) next.add(label);
                        else next.delete(label);
                        set(key, [...next]);
                      }}
                    />
                    {label}
                  </label>
                );
              })}
            </fieldset>
          );
        }
        const required = field.validations?.required ?? false;
        if (field.type === "dropdown") {
          const value = answers[key];
          const labelText = required ? `${field.attributes.label} *` : field.attributes.label;
          const options = field.attributes.options.map(optionLabel);
          return (
            <div key={key} className="space-y-1.5">
              {field.attributes.multiple ? (
                <KumoSelect<string, true>
                  multiple
                  label={labelText}
                  hideLabel={false}
                  required={required}
                  value={Array.isArray(value) ? value : []}
                  onValueChange={(next) => set(key, next)}
                  placeholder="Select…"
                  className="w-full"
                >
                  {options.map((option) => (
                    <KumoSelect.Option key={option} value={option}>
                      {option}
                    </KumoSelect.Option>
                  ))}
                </KumoSelect>
              ) : (
                <KumoSelect<string>
                  label={labelText}
                  hideLabel={false}
                  required={required}
                  value={String(value ?? "")}
                  onValueChange={(next) => set(key, next ?? "")}
                  className="w-full"
                  items={[
                    { value: "", label: "Select…" },
                    ...options.map((option) => ({ value: option, label: option })),
                  ]}
                >
                  <KumoSelect.Option value="">Select…</KumoSelect.Option>
                  {options.map((option) => (
                    <KumoSelect.Option key={option} value={option}>
                      {option}
                    </KumoSelect.Option>
                  ))}
                </KumoSelect>
              )}
              {description}
            </div>
          );
        }
        const value = String(answers[key] ?? field.attributes.value ?? "");
        return (
          <div key={key} className="space-y-1.5">
            <Label htmlFor={id} text={field.attributes.label} required={required} />
            {description}
            {field.type === "input" ? (
              <input
                id={id}
                required={required}
                value={value}
                placeholder={field.attributes.placeholder}
                onChange={(event) => set(key, event.target.value)}
                className={cn(inputClass, "h-9")}
              />
            ) : (
              <textarea
                id={id}
                required={required}
                value={value}
                rows={field.attributes.render ? 6 : 4}
                placeholder={field.attributes.placeholder}
                onChange={(event) => set(key, event.target.value)}
                className={cn(inputClass, "py-2", field.attributes.render && "font-mono")}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}