import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, ExternalLink } from "lucide-react";
import { Button } from "@/components/Button";
import {
  AdminHeading,
  FormSection,
  InputField,
  TextareaField,
  SelectField,
  StatusBadge,
  ImageUpload,
  ConfirmButton,
} from "@/components/admin";
import { getRegionForAdmin } from "@/lib/atlas/queries";
import { updateRegion, deleteRegion } from "../../actions";

export const dynamic = "force-dynamic";

const statusOptions = ["draft", "published", "archived"] as const;

export default async function AdminAtlasRegionEditor({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const region = await getRegionForAdmin(id);
  if (!region) notFound();

  return (
    <>
      <div className="mb-4">
        <Link
          href="/admin/atlas"
          className="inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-slate)] hover:text-[var(--color-blue)]"
        >
          <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
          Back to Atlas
        </Link>
      </div>

      <AdminHeading
        eyebrow={`Region · ${region.slug}`}
        title={region.name}
        lede="Hero image, short summary, and slug used across /products/atlas."
        actions={
          <div className="flex items-center gap-2">
            <StatusBadge label={region.status} dot />
            <Link
              href={`/products/atlas/regions/${region.slug}`}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-1 rounded-md border border-[var(--color-line)] px-3 py-1.5 text-[12px] font-semibold text-[var(--color-slate)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
            >
              <ExternalLink className="h-3.5 w-3.5" aria-hidden />
              View live
            </Link>
          </div>
        }
      />

      <form action={updateRegion} className="flex flex-col gap-6">
        <input type="hidden" name="id" value={region.id} />

        <FormSection title="Basics">
          <div className="grid gap-4 md:grid-cols-3">
            <InputField
              label="Name"
              name="name"
              defaultValue={region.name}
              required
              maxLength={200}
              wrapClassName="md:col-span-2"
            />
            <InputField
              label="Slug"
              name="slug"
              defaultValue={region.slug}
              required
              maxLength={80}
              hint="URL segment: /products/atlas/regions/<slug>"
            />
            <TextareaField
              label="Summary"
              name="summary"
              defaultValue={region.summary}
              rows={4}
              maxLength={2000}
              wrapClassName="md:col-span-3"
            />
            <InputField
              label="Icon key (optional)"
              name="icon"
              defaultValue={region.icon ?? ""}
              maxLength={80}
              hint="Used by region-picker UI, if supported."
            />
            <InputField
              label="Position"
              name="position"
              type="number"
              defaultValue={String(region.position)}
              hint="Sort order."
            />
            <SelectField
              label="Status"
              name="status"
              defaultValue={region.status}
            >
              {statusOptions.map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </SelectField>
          </div>
        </FormSection>

        <FormSection title="Hero image">
          <ImageUpload
            name="photoUrl"
            altName="photoAlt"
            folder="atlas"
            label="Region image"
            defaultValue={region.photoUrl}
            defaultAlt={region.photoAlt}
          />
        </FormSection>

        <div className="sticky bottom-4 z-10 flex items-center justify-between rounded-xl border border-[var(--color-line)] bg-white p-4 shadow-md">
          <p className="text-[13px] text-[var(--color-slate)]">
            Publishing reflects live at <code>/products/atlas/regions/{region.slug}</code>.
          </p>
          <Button type="submit" variant="primary" className="!px-5 !py-2.5 !text-[13px]">
            Save region
          </Button>
        </div>
      </form>

      <FormSection
        title="Danger zone"
        description="Deleting this region won't delete its conditions, but the /regions/<slug> route will 404."
        tone="danger"
        className="mt-6"
      >
        <form action={deleteRegion}>
          <input type="hidden" name="id" value={region.id} />
          <ConfirmButton
            label="Delete region"
            confirmLabel="Click again to delete permanently"
            tone="danger"
          />
        </form>
      </FormSection>
    </>
  );
}
