"use client";
import * as React from "react";
import { COUNTRIES } from "@fetcha/core/client";
import { createProject, updateProject } from "@/actions/projects";
import { Button } from "@/components/ui/button";
import { Input, NativeSelect, Textarea } from "@/components/ui/input";
import { Field, FieldError, Hint, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

export interface ProjectFormValues {
  name: string;
  description: string | null;
  environment: string;
  defaultCountry: string | null;
  defaultNetwork: string;
  logLevel: string;
  softLimitUsd: number | null;
  hardLimitUsd: number | null;
  monthlyRequestLimit: number | null;
}

const LOG_LEVELS = [
  { v: "none", title: "None", desc: "Only billing counters. No URL, headers or timing are kept — nothing to inspect in Requests." },
  { v: "metadata", title: "Metadata", desc: "URL, status, network, country, timing and size. Recommended for production.", recommended: true },
  { v: "headers", title: "Headers", desc: "Metadata plus request and response headers. Authorization and Cookie are always redacted." },
  { v: "full", title: "Full", desc: "Headers plus a response body preview, kept for your plan's retention window. Use for debugging only." },
] as const;

const NETWORKS = [
  { v: "auto", label: "Auto (recommended)", live: true },
  { v: "residential", label: "Residential", live: true },
  { v: "datacenter", label: "Datacenter — coming soon", live: false },
  { v: "isp", label: "ISP — coming soon", live: false },
  { v: "mobile", label: "Mobile — coming soon", live: false },
];

const COUNTRY_OPTIONS = Object.entries(COUNTRIES).sort((a, b) => a[1].localeCompare(b[1]));

export function ProjectForm({
  mode,
  projectId,
  initial,
  onSuccess,
  onCancel,
  submitLabel,
  compact,
}: {
  mode: "create" | "edit";
  projectId?: string;
  initial?: Partial<ProjectFormValues>;
  onSuccess?: (id: string) => void;
  onCancel?: () => void;
  submitLabel?: string;
  compact?: boolean;
}) {
  const [pending, startTransition] = React.useTransition();
  const [error, setError] = React.useState<string | null>(null);
  const [fieldError, setFieldError] = React.useState<string | null>(null);
  const [saved, setSaved] = React.useState(false);
  const [logLevel, setLogLevel] = React.useState(initial?.logLevel ?? "metadata");
  const [environment, setEnvironment] = React.useState(initial?.environment ?? "production");

  function submit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setFieldError(null);
    setSaved(false);
    const fd = new FormData(e.currentTarget);
    startTransition(async () => {
      const res = mode === "create" ? await createProject(fd) : await updateProject(projectId!, fd);
      if (!res.ok) {
        setError(res.error);
        setFieldError(res.field ?? null);
        return;
      }
      setSaved(true);
      const id = mode === "create" && "data" in res && res.data ? res.data.id : projectId!;
      onSuccess?.(id);
    });
  }

  const err = (f: string) => (fieldError === f ? error : null);

  return (
    <form onSubmit={submit} className="grid gap-5" noValidate>
      {error && !fieldError ? <Alert variant="danger">{error}</Alert> : null}
      {saved && mode === "edit" ? <Alert variant="success">Project settings saved.</Alert> : null}

      <section className="grid gap-4">
        <div className={cn("grid gap-4", !compact && "sm:grid-cols-[1fr_200px]")}>
          <Field>
            <Label htmlFor="p-name">Name</Label>
            <Input id="p-name" name="name" defaultValue={initial?.name ?? ""} placeholder="e.g. Price monitoring" maxLength={64} required autoFocus={mode === "create"} aria-invalid={Boolean(err("name"))} />
            <FieldError>{err("name")}</FieldError>
          </Field>
          <Field>
            <Label>Environment</Label>
            <div className="flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1 text-[13px] font-medium text-fg-muted">
              {(["production", "development"] as const).map((env) => (
                <label key={env} className={cn("flex h-7 flex-1 cursor-pointer items-center justify-center rounded-[5px] capitalize transition-colors", environment === env ? "bg-bg text-fg shadow-xs" : "hover:text-fg")}>
                  <input type="radio" name="environment" value={env} checked={environment === env} onChange={() => setEnvironment(env)} className="sr-only" />
                  {env}
                </label>
              ))}
            </div>
          </Field>
        </div>
        <Field>
          <Label htmlFor="p-description">Description</Label>
          <Textarea id="p-description" name="description" defaultValue={initial?.description ?? ""} placeholder="What this project fetches and for whom (optional)" maxLength={280} className="min-h-[64px]" />
        </Field>
      </section>

      <section className="grid gap-4">
        <h4 className="text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Request defaults</h4>
        <div className={cn("grid gap-4", !compact && "sm:grid-cols-2")}>
          <Field>
            <Label htmlFor="p-country">Default country</Label>
            <NativeSelect id="p-country" name="defaultCountry" defaultValue={initial?.defaultCountry ?? ""}>
              <option value="">No default — let routing decide</option>
              {COUNTRY_OPTIONS.map(([code, name]) => (
                <option key={code} value={code}>
                  {name} ({code})
                </option>
              ))}
            </NativeSelect>
            <Hint>Used when a request omits `country`.</Hint>
          </Field>
          <Field>
            <Label htmlFor="p-network">Default network</Label>
            <NativeSelect id="p-network" name="defaultNetwork" defaultValue={initial?.defaultNetwork ?? "auto"}>
              {NETWORKS.map((n) => (
                <option key={n.v} value={n.v} disabled={!n.live}>
                  {n.label}
                </option>
              ))}
            </NativeSelect>
            <Hint>Only residential is live today; auto resolves to residential.</Hint>
          </Field>
        </div>
        <fieldset className="grid gap-2">
          <legend className="mb-1.5 text-[13px] font-medium">Request logging</legend>
          <div className={cn("grid gap-2", !compact && "sm:grid-cols-2")}>
            {LOG_LEVELS.map((l) => (
              <label key={l.v} className={cn("flex cursor-pointer items-start gap-2.5 rounded-md border px-3 py-2.5 transition-colors", logLevel === l.v ? "border-accent bg-accent-soft/40" : "border-border hover:border-border-strong")}>
                <input type="radio" name="logLevel" value={l.v} checked={logLevel === l.v} onChange={() => setLogLevel(l.v)} className="mt-0.5 accent-[var(--accent)]" />
                <span className="grid gap-0.5">
                  <span className="flex items-center gap-2 text-[13px] font-medium">
                    {l.title}
                    {"recommended" in l && l.recommended ? <Badge variant="accent">Recommended</Badge> : null}
                  </span>
                  <span className="text-[12px] leading-relaxed text-fg-muted">{l.desc}</span>
                </span>
              </label>
            ))}
          </div>
        </fieldset>
      </section>

      <section className="grid gap-4">
        <h4 className="text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Limits</h4>
        <div className={cn("grid gap-4", !compact && "sm:grid-cols-3")}>
          <Field>
            <Label htmlFor="p-soft">Soft limit (USD / month)</Label>
            <Input id="p-soft" name="softLimitUsd" type="number" min={0} step="0.01" inputMode="decimal" defaultValue={initial?.softLimitUsd ?? ""} placeholder="No limit" className="font-mono tabular" aria-invalid={Boolean(err("softLimitUsd"))} />
            <Hint>We email you when spend crosses it. Requests continue.</Hint>
            <FieldError>{err("softLimitUsd")}</FieldError>
          </Field>
          <Field>
            <Label htmlFor="p-hard">Hard limit (USD / month)</Label>
            <Input id="p-hard" name="hardLimitUsd" type="number" min={0} step="0.01" inputMode="decimal" defaultValue={initial?.hardLimitUsd ?? ""} placeholder="No limit" className="font-mono tabular" aria-invalid={Boolean(err("hardLimitUsd"))} />
            <Hint>Requests are rejected with USAGE_LIMIT_REACHED until next month.</Hint>
            <FieldError>{err("hardLimitUsd")}</FieldError>
          </Field>
          <Field>
            <Label htmlFor="p-reqs">Monthly request limit</Label>
            <Input id="p-reqs" name="monthlyRequestLimit" type="number" min={0} step="1" inputMode="numeric" defaultValue={initial?.monthlyRequestLimit ?? ""} placeholder="Plan limit" className="font-mono tabular" aria-invalid={Boolean(err("monthlyRequestLimit"))} />
            <Hint>Caps this project below your plan allowance.</Hint>
            <FieldError>{err("monthlyRequestLimit")}</FieldError>
          </Field>
        </div>
      </section>

      <div className="flex items-center justify-end gap-2 border-t border-border pt-4">
        {onCancel ? (
          <Button type="button" variant="ghost" onClick={onCancel} disabled={pending}>
            Cancel
          </Button>
        ) : null}
        <Button type="submit" variant="primary" loading={pending}>
          {submitLabel ?? (mode === "create" ? "Create project" : "Save changes")}
        </Button>
      </div>
    </form>
  );
}