"use client";

import { useActionState } from "react";
import { saveSettingsAction } from "@/app/admin/actions";
import type { SiteSettings } from "@/lib/cms";
import type { ActionState } from "@/lib/form";

export function SettingsForm({ settings }: { settings: SiteSettings }) {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(
    saveSettingsAction,
    null,
  );

  return (
    <form action={formAction} className="space-y-6">
      {state?.error ? (
        <p
          role="alert"
          className="rounded-xl border border-coral/40 bg-coral-soft px-4 py-3 text-sm font-medium text-coral-dark"
        >
          {state.error}
        </p>
      ) : null}

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Brand & contact */}
        <section className="card-soft space-y-5 p-7">
          <h2 className="display-3">Brand & contact</h2>
          <div>
            <label htmlFor="brandName" className="field-label">
              Brand name *
            </label>
            <input
              id="brandName"
              name="brandName"
              type="text"
              required
              defaultValue={settings.brandName}
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="tagline" className="field-label">
              Tagline
            </label>
            <input
              id="tagline"
              name="tagline"
              type="text"
              defaultValue={settings.tagline}
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="description" className="field-label">
              About blurb (used in the footer)
            </label>
            <textarea
              id="description"
              name="description"
              rows={3}
              defaultValue={settings.description}
              className="field-textarea resize-y"
            />
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            <div>
              <label htmlFor="email" className="field-label">
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                defaultValue={settings.email}
                className="field-input"
              />
            </div>
            <div>
              <label htmlFor="phone" className="field-label">
                Phone
              </label>
              <input
                id="phone"
                name="phone"
                type="text"
                defaultValue={settings.phone}
                className="field-input"
              />
            </div>
          </div>
          <div>
            <label htmlFor="address" className="field-label">
              Address
            </label>
            <input
              id="address"
              name="address"
              type="text"
              defaultValue={settings.address}
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="hours" className="field-label">
              Opening hours
            </label>
            <input
              id="hours"
              name="hours"
              type="text"
              defaultValue={settings.hours}
              className="field-input"
            />
          </div>
          <div className="grid gap-4 sm:grid-cols-3">
            <div>
              <label htmlFor="instagram" className="field-label">
                Instagram URL
              </label>
              <input
                id="instagram"
                name="instagram"
                type="text"
                defaultValue={settings.social.instagram}
                className="field-input"
              />
            </div>
            <div>
              <label htmlFor="pinterest" className="field-label">
                Pinterest URL
              </label>
              <input
                id="pinterest"
                name="pinterest"
                type="text"
                defaultValue={settings.social.pinterest}
                className="field-input"
              />
            </div>
            <div>
              <label htmlFor="linkedin" className="field-label">
                LinkedIn URL
              </label>
              <input
                id="linkedin"
                name="linkedin"
                type="text"
                defaultValue={settings.social.linkedin}
                className="field-input"
              />
            </div>
          </div>
        </section>

        {/* Homepage sections */}
        <section className="card-soft space-y-5 p-7">
          <h2 className="display-3">Homepage sections</h2>

          <fieldset className="rounded-2xl bg-mint p-5">
            <legend className="px-1 text-[0.72rem] font-bold uppercase tracking-[0.16em] text-ink-mute">
              Hero
            </legend>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="heroEyebrow" className="field-label">
                    Eyebrow (dark text)
                  </label>
                  <input
                    id="heroEyebrow"
                    name="heroEyebrow"
                    type="text"
                    defaultValue={settings.hero.eyebrow}
                    className="field-input"
                  />
                </div>
                <div>
                  <label htmlFor="heroEyebrowAccent" className="field-label">
                    Eyebrow highlight (coral)
                  </label>
                  <input
                    id="heroEyebrowAccent"
                    name="heroEyebrowAccent"
                    type="text"
                    defaultValue={settings.hero.eyebrowAccent}
                    className="field-input"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="heroHeadline" className="field-label">
                    Headline line 1
                  </label>
                  <input
                    id="heroHeadline"
                    name="heroHeadline"
                    type="text"
                    defaultValue={settings.hero.headline}
                    className="field-input"
                  />
                </div>
                <div>
                  <label htmlFor="heroHeadlineAccent" className="field-label">
                    Headline line 2
                  </label>
                  <input
                    id="heroHeadlineAccent"
                    name="heroHeadlineAccent"
                    type="text"
                    defaultValue={settings.hero.headlineAccent}
                    className="field-input"
                  />
                </div>
              </div>
              <div>
                <label htmlFor="heroSubline" className="field-label">
                  Subline
                </label>
                <textarea
                  id="heroSubline"
                  name="heroSubline"
                  rows={2}
                  defaultValue={settings.hero.subline}
                  className="field-textarea resize-y"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="heroCtaLabel" className="field-label">
                    CTA label
                  </label>
                  <input
                    id="heroCtaLabel"
                    name="heroCtaLabel"
                    type="text"
                    defaultValue={settings.hero.ctaLabel}
                    className="field-input"
                  />
                </div>
                <div>
                  <label htmlFor="heroCtaHref" className="field-label">
                    CTA link
                  </label>
                  <input
                    id="heroCtaHref"
                    name="heroCtaHref"
                    type="text"
                    defaultValue={settings.hero.ctaHref}
                    className="field-input"
                  />
                </div>
              </div>
            </div>
          </fieldset>

          <fieldset className="rounded-2xl bg-mint p-5">
            <legend className="px-1 text-[0.72rem] font-bold uppercase tracking-[0.16em] text-ink-mute">
              Promo banner
            </legend>
            <div className="space-y-4">
              <div>
                <label htmlFor="bannerEyebrow" className="field-label">
                  Eyebrow
                </label>
                <input
                  id="bannerEyebrow"
                  name="bannerEyebrow"
                  type="text"
                  defaultValue={settings.banner.eyebrow}
                  className="field-input"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="bannerTitle1" className="field-label">
                    Title line 1
                  </label>
                  <input
                    id="bannerTitle1"
                    name="bannerTitle1"
                    type="text"
                    defaultValue={settings.banner.title1}
                    className="field-input"
                  />
                </div>
                <div>
                  <label htmlFor="bannerTitle2" className="field-label">
                    Title line 2
                  </label>
                  <input
                    id="bannerTitle2"
                    name="bannerTitle2"
                    type="text"
                    defaultValue={settings.banner.title2}
                    className="field-input"
                  />
                </div>
              </div>
              <div>
                <label htmlFor="bannerButtonLabel" className="field-label">
                  Button label
                </label>
                <input
                  id="bannerButtonLabel"
                  name="bannerButtonLabel"
                  type="text"
                  defaultValue={settings.banner.buttonLabel}
                  className="field-input"
                />
              </div>
            </div>
          </fieldset>

          <fieldset className="rounded-2xl bg-mint p-5">
            <legend className="px-1 text-[0.72rem] font-bold uppercase tracking-[0.16em] text-ink-mute">
              Closing CTA
            </legend>
            <div className="space-y-4">
              <div>
                <label htmlFor="ctaHeading" className="field-label">
                  Heading
                </label>
                <input
                  id="ctaHeading"
                  name="ctaHeading"
                  type="text"
                  defaultValue={settings.cta.heading}
                  className="field-input"
                />
              </div>
              <div>
                <label htmlFor="ctaText" className="field-label">
                  Text
                </label>
                <textarea
                  id="ctaText"
                  name="ctaText"
                  rows={2}
                  defaultValue={settings.cta.text}
                  className="field-textarea resize-y"
                />
              </div>
              <div>
                <label htmlFor="ctaButtonLabel" className="field-label">
                  Button label
                </label>
                <input
                  id="ctaButtonLabel"
                  name="ctaButtonLabel"
                  type="text"
                  defaultValue={settings.cta.buttonLabel}
                  className="field-input"
                />
              </div>
            </div>
          </fieldset>
        </section>
      </div>

      {/* SEO */}
      <section className="card-soft space-y-5 p-7">
        <div>
          <h2 className="display-3">Site-wide SEO</h2>
          <p className="mt-1 text-sm text-ink-mute">
            Defaults applied across the site, plus technical SEO extras.
          </p>
        </div>
        <div className="grid gap-5 lg:grid-cols-2">
          <div>
            <label htmlFor="seoMetaTitle" className="field-label">
              Default meta title
            </label>
            <input
              id="seoMetaTitle"
              name="seoMetaTitle"
              type="text"
              maxLength={70}
              defaultValue={settings.seo.metaTitle}
              placeholder="Falls back to “Brand — Tagline”"
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="seoKeywords" className="field-label">
              Keywords (comma separated)
            </label>
            <input
              id="seoKeywords"
              name="seoKeywords"
              type="text"
              defaultValue={settings.seo.keywords}
              className="field-input"
            />
          </div>
        </div>
        <div>
          <label htmlFor="seoMetaDescription" className="field-label">
            Default meta description
          </label>
          <textarea
            id="seoMetaDescription"
            name="seoMetaDescription"
            rows={3}
            maxLength={180}
            defaultValue={settings.seo.metaDescription}
            className="field-textarea resize-y"
          />
        </div>
        <div className="grid gap-5 lg:grid-cols-3">
          <div>
            <label htmlFor="seoOgImage" className="field-label">
              Default social share image URL
            </label>
            <input
              id="seoOgImage"
              name="seoOgImage"
              type="text"
              defaultValue={settings.seo.ogImage}
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="seoTwitter" className="field-label">
              Twitter / X handle
            </label>
            <input
              id="seoTwitter"
              name="seoTwitter"
              type="text"
              defaultValue={settings.seo.twitterHandle}
              placeholder="@yourhandle"
              className="field-input"
            />
          </div>
          <div>
            <label htmlFor="seoVerification" className="field-label">
              Google Search Console verification
            </label>
            <input
              id="seoVerification"
              name="seoVerification"
              type="text"
              defaultValue={settings.seo.googleVerification}
              className="field-input"
            />
          </div>
        </div>
      </section>

      <button
        type="submit"
        disabled={pending}
        className="btn btn-teal disabled:cursor-not-allowed disabled:opacity-60"
      >
        {pending ? "Saving…" : "Save settings"}
      </button>
    </form>
  );
}