"use client";

import { useActionState, useState } from "react";
import { createNavItem } from "@/lib/actions/nav";
import { SITE_PAGES } from "@/lib/site-pages";

type TopLevelOption = { id: string; label: string };

export function NewNavItemForm({
  menu,
  topLevelOptions,
}: {
  menu: "header" | "footer";
  topLevelOptions: TopLevelOption[];
}) {
  const [state, formAction, isPending] = useActionState(createNavItem, undefined);
  const [label, setLabel] = useState("");
  const [url, setUrl] = useState("");

  function handlePagePick(e: React.ChangeEvent<HTMLSelectElement>) {
    const path = e.target.value;
    if (!path) return;
    const page = SITE_PAGES.find((p) => p.path === path);
    if (page) {
      setUrl(page.path);
      if (!label) setLabel(page.label);
    }
  }

  return (
    <form action={formAction} className="flex flex-wrap items-center gap-2">
      <input type="hidden" name="menu" value={menu} />
      <select
        onChange={handlePagePick}
        defaultValue=""
        className="rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      >
        <option value="">Choose an existing page...</option>
        {SITE_PAGES.map((page) => (
          <option key={page.path} value={page.path}>
            {page.label}
          </option>
        ))}
      </select>
      <input
        type="text"
        name="label"
        placeholder="Menu title"
        required
        value={label}
        onChange={(e) => setLabel(e.target.value)}
        className="rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      />
      <input
        type="text"
        name="url"
        placeholder="/path or https://..."
        required
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        className="flex-1 rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      />
      <select
        name="parentId"
        defaultValue=""
        className="rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      >
        <option value="">Top level</option>
        {topLevelOptions.map((opt) => (
          <option key={opt.id} value={opt.id}>
            {opt.label}
          </option>
        ))}
      </select>
      <select
        name="visibility"
        defaultValue="always"
        className="rounded border border-charcoal/20 bg-warm-white px-2 py-1.5 text-sm text-charcoal"
      >
        <option value="always">Always</option>
        <option value="logged_in">Logged in only</option>
        <option value="logged_out">Logged out only</option>
      </select>
      <label className="flex items-center gap-1 text-sm text-charcoal">
        <input type="checkbox" name="isButtonStyle" />
        Button style
      </label>
      <button
        type="submit"
        disabled={isPending}
        className="rounded-full border border-terracotta px-4 py-1.5 text-sm font-medium text-terracotta hover:bg-terracotta/10 disabled:opacity-60"
      >
        {isPending ? "Adding..." : "Add item"}
      </button>
      {state?.error && <p className="w-full text-xs text-terracotta">{state.error}</p>}
    </form>
  );
}