"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import type { ActionResult } from "@/app/dashboard/actions";

type ProfileFormProps = {
  studioName: string;
  description: string;
  tagline: string;
  about: string;
  architectName: string;
  architectTitle: string;
  philosophy: string;
  vision: string;
  mission: string;
  approach: string;
  designPrinciples: string;
  experience: string;
  studioCulture: string;
  workspace: string;
  methodology: string;
  collaborations: string;
  location: string;
  foundedYear: string;
  websiteUrl: string;
  publicEmail: string;
  phone: string;
  whatsapp: string;
  businessHours: string;
  mapEmbedUrl: string;
  socialInstagram: string;
  socialLinkedin: string;
  socialX: string;
  seoTitle: string;
  seoDescription: string;
  action: (formData: FormData) => Promise<ActionResult>;
};

export function ProfileSettingsForm(props: ProfileFormProps) {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const [pending, startTransition] = useTransition();

  return (
    <form
      className="space-y-6"
      action={(formData) => {
        setError(null);
        setSaved(false);
        startTransition(async () => {
          const result = await props.action(formData);
          if (!result.ok) {
            setError(result.error);
            return;
          }
          setSaved(true);
          router.refresh();
        });
      }}
    >
      <section className="archi-panel space-y-5 p-5 sm:p-6 lg:p-7">
        <div className="border-b border-[var(--archi-line)] pb-4">
          <p className="text-[0.65rem] tracking-[0.2em] text-[var(--archi-ink-muted)] uppercase">
            Profile
          </p>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-2xl">
            Identity
          </h2>
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          <Field
            name="studioName"
            label="Studio name"
            defaultValue={props.studioName}
            required
          />
          <Field name="tagline" label="Tagline" defaultValue={props.tagline} />
        </div>
        <Area
          name="description"
          label="Short description"
          rows={3}
          defaultValue={props.description}
        />
        <Area name="about" label="About" rows={5} defaultValue={props.about} />
        <div className="grid gap-4 lg:grid-cols-2">
          <Field
            name="architectName"
            label="Architect name"
            defaultValue={props.architectName}
          />
          <Field
            name="architectTitle"
            label="Architect title"
            defaultValue={props.architectTitle}
          />
        </div>
      </section>

      <section className="archi-panel space-y-5 p-5 sm:p-6 lg:p-7">
        <div className="border-b border-[var(--archi-line)] pb-4">
          <p className="text-[0.65rem] tracking-[0.2em] text-[var(--archi-ink-muted)] uppercase">
            Narrative
          </p>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-2xl">
            About story
          </h2>
        </div>
        <Area
          name="philosophy"
          label="Philosophy"
          rows={4}
          defaultValue={props.philosophy}
        />
        <div className="grid gap-4 lg:grid-cols-2">
          <Area
            name="vision"
            label="Vision"
            rows={4}
            defaultValue={props.vision}
          />
          <Area
            name="mission"
            label="Mission"
            rows={4}
            defaultValue={props.mission}
          />
        </div>
        <Area
          name="approach"
          label="Approach"
          rows={4}
          defaultValue={props.approach}
        />
        <div className="grid gap-4 lg:grid-cols-2">
          <Area
            name="designPrinciples"
            label="Design principles"
            rows={4}
            defaultValue={props.designPrinciples}
          />
          <Area
            name="experience"
            label="Experience"
            rows={4}
            defaultValue={props.experience}
          />
        </div>
      </section>

      <section className="archi-panel space-y-5 p-5 sm:p-6 lg:p-7">
        <div className="border-b border-[var(--archi-line)] pb-4">
          <p className="text-[0.65rem] tracking-[0.2em] text-[var(--archi-ink-muted)] uppercase">
            Practice
          </p>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-2xl">
            Studio
          </h2>
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          <Area
            name="studioCulture"
            label="Studio culture"
            rows={4}
            defaultValue={props.studioCulture}
          />
          <Area
            name="workspace"
            label="Workspace"
            rows={4}
            defaultValue={props.workspace}
          />
          <Area
            name="methodology"
            label="Methodology"
            rows={4}
            defaultValue={props.methodology}
          />
          <Area
            name="collaborations"
            label="Collaborations / partners"
            rows={4}
            defaultValue={props.collaborations}
          />
        </div>
      </section>

      <section className="archi-panel space-y-5 p-5 sm:p-6 lg:p-7">
        <div className="border-b border-[var(--archi-line)] pb-4">
          <p className="text-[0.65rem] tracking-[0.2em] text-[var(--archi-ink-muted)] uppercase">
            Reach
          </p>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-2xl">
            Contact
          </h2>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          <Field
            name="location"
            label="Location"
            defaultValue={props.location}
          />
          <Field
            name="foundedYear"
            label="Founded year"
            type="number"
            defaultValue={props.foundedYear}
          />
          <Field
            name="publicEmail"
            label="Public email"
            defaultValue={props.publicEmail}
          />
          <Field name="phone" label="Phone" defaultValue={props.phone} />
          <Field
            name="whatsapp"
            label="WhatsApp"
            defaultValue={props.whatsapp}
          />
          <Field
            name="businessHours"
            label="Business hours"
            defaultValue={props.businessHours}
          />
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          <Field
            name="websiteUrl"
            label="Website URL"
            defaultValue={props.websiteUrl}
          />
          <Field
            name="mapEmbedUrl"
            label="Map embed URL"
            defaultValue={props.mapEmbedUrl}
          />
        </div>
        <div className="grid gap-4 lg:grid-cols-3">
          <Field
            name="socialInstagram"
            label="Instagram URL"
            defaultValue={props.socialInstagram}
          />
          <Field
            name="socialLinkedin"
            label="LinkedIn URL"
            defaultValue={props.socialLinkedin}
          />
          <Field
            name="socialX"
            label="X / Twitter URL"
            defaultValue={props.socialX}
          />
        </div>
      </section>

      <section className="archi-panel space-y-5 p-5 sm:p-6 lg:p-7">
        <div className="border-b border-[var(--archi-line)] pb-4">
          <p className="text-[0.65rem] tracking-[0.2em] text-[var(--archi-ink-muted)] uppercase">
            Discovery
          </p>
          <h2 className="mt-2 font-[family-name:var(--font-display)] text-xl tracking-tight sm:text-2xl">
            SEO
          </h2>
        </div>
        <Field
          name="seoTitle"
          label="SEO title"
          defaultValue={props.seoTitle}
        />
        <Area
          name="seoDescription"
          label="SEO description"
          rows={3}
          defaultValue={props.seoDescription}
        />
      </section>

      <div className="archi-panel flex flex-col gap-3 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6">
        <div className="min-h-5 text-sm">
          {error ? (
            <p className="text-red-800" role="alert">
              {error}
            </p>
          ) : null}
          {saved ? (
            <p className="text-emerald-800" role="status">
              Profile saved.
            </p>
          ) : (
            <p className="text-[var(--archi-ink-muted)]">
              Save to publish profile changes to your live studio site.
            </p>
          )}
        </div>
        <button
          type="submit"
          disabled={pending}
          className="archi-btn-primary min-h-11 shrink-0 disabled:opacity-60"
        >
          {pending ? "Saving…" : "Save profile"}
        </button>
      </div>
    </form>
  );
}

function Field({
  name,
  label,
  defaultValue,
  required,
  type = "text",
}: {
  name: string;
  label: string;
  defaultValue?: string;
  required?: boolean;
  type?: string;
}) {
  return (
    <label className="block text-sm">
      {label}
      <input
        name={name}
        type={type}
        required={required}
        defaultValue={defaultValue}
        className="archi-input mt-2"
      />
    </label>
  );
}

function Area({
  name,
  label,
  defaultValue,
  rows,
}: {
  name: string;
  label: string;
  defaultValue?: string;
  rows: number;
}) {
  return (
    <label className="block text-sm">
      {label}
      <textarea
        name={name}
        rows={rows}
        defaultValue={defaultValue}
        className="archi-input mt-2"
      />
    </label>
  );
}
