"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Reveal } from "../../../components/Reveal";
import type { CustomerProfile } from "../../../lib/customerAuth";

const inputClass =
  "w-full border border-border rounded-sm px-4 py-3 text-body-sm text-text-primary outline-none focus:border-brand transition-colors";

function Field({
  label,
  wrapperClassName = "flex-1 min-w-0",
  ...props
}: { label: string; wrapperClassName?: string } & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <label className={`flex flex-col gap-2 items-start ${wrapperClassName}`}>
      <span className="text-label text-text-muted">{label}</span>
      <input {...props} className={inputClass} />
    </label>
  );
}

export function ProfileForm({ profile }: { profile: CustomerProfile }) {
  const router = useRouter();
  const [deliveryMethod, setDeliveryMethod] = useState<"address" | "packstation">(profile.deliveryMethod ?? "address");
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [saving, setSaving] = useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setSuccess(false);

    const form = new FormData(e.currentTarget);
    const body = {
      firstName: String(form.get("firstName") ?? ""),
      lastName: String(form.get("lastName") ?? ""),
      deliveryMethod,
      street: String(form.get("street") ?? "") || undefined,
      packstationNumber: String(form.get("packstationNumber") ?? "") || undefined,
      postNumber: String(form.get("postNumber") ?? "") || undefined,
      zip: String(form.get("zip") ?? ""),
      city: String(form.get("city") ?? ""),
      country: String(form.get("country") ?? ""),
    };

    try {
      const res = await fetch("/api/account/profile", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!data.ok) {
        setError(data.reason || "Profil konnte nicht gespeichert werden.");
        setSaving(false);
        return;
      }
      setSuccess(true);
      setSaving(false);
      router.refresh();
    } catch {
      setError("Profil konnte gerade nicht gespeichert werden.");
      setSaving(false);
    }
  }

  return (
    <Reveal className="flex flex-col gap-6 items-start w-full">
      <p className="font-semibold text-h-feature text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
        Mein Profil
      </p>
      <p className="text-body-sm text-text-muted">
        {profile.email} · Kundennummer {profile.customerNumber}
      </p>

      <form onSubmit={handleSubmit} className="flex flex-col gap-4 items-start w-full">
        <div className="flex flex-col sm:flex-row gap-4 w-full">
          <Field label="Vorname" name="firstName" type="text" defaultValue={profile.firstName} required />
          <Field label="Nachname" name="lastName" type="text" defaultValue={profile.lastName} required />
        </div>

        <div className="w-full flex flex-col gap-2 items-start">
          <span className="text-label text-text-muted">Lieferart</span>
          <div className="flex w-full max-w-sm rounded-sm border border-border overflow-hidden">
            <button
              type="button"
              onClick={() => setDeliveryMethod("address")}
              aria-pressed={deliveryMethod === "address"}
              className={`flex-1 py-3 text-body-sm font-bold transition-colors ${deliveryMethod === "address" ? "bg-brand text-text-primary" : "text-text-muted hover:text-text-primary"}`}
            >
              Lieferadresse
            </button>
            <button
              type="button"
              onClick={() => setDeliveryMethod("packstation")}
              aria-pressed={deliveryMethod === "packstation"}
              className={`flex-1 py-3 text-body-sm font-bold border-l border-border transition-colors ${deliveryMethod === "packstation" ? "bg-brand text-text-primary" : "text-text-muted hover:text-text-primary"}`}
            >
              Packstation
            </button>
          </div>
        </div>

        {deliveryMethod === "address" ? (
          <Field
            label="Straße und Hausnummer"
            name="street"
            type="text"
            defaultValue={profile.street ?? ""}
            required
            wrapperClassName="w-full"
          />
        ) : (
          <div className="flex flex-col sm:flex-row gap-4 w-full">
            <Field label="Packstationnummer" name="packstationNumber" type="text" defaultValue={profile.packstationNumber ?? ""} required />
            <Field label="Postnummer" name="postNumber" type="text" defaultValue={profile.postNumber ?? ""} required />
          </div>
        )}

        <div className="flex flex-col sm:flex-row gap-4 w-full">
          <Field label="PLZ" name="zip" type="text" defaultValue={profile.zip ?? ""} required />
          <Field label="Ort" name="city" type="text" defaultValue={profile.city ?? ""} required />
        </div>

        <label className="flex flex-col gap-2 items-start w-full sm:w-1/2">
          <span className="text-label text-text-muted">Land</span>
          <select name="country" defaultValue={profile.country ?? "Deutschland"} required className={`${inputClass} bg-bg-base`}>
            <option>Deutschland</option>
            <option>Österreich</option>
            <option>Schweiz</option>
          </select>
        </label>

        {error && <p className="text-label text-red-600">{error}</p>}
        {success && <p className="text-label text-success">Gespeichert.</p>}

        <button
          type="submit"
          disabled={saving}
          className={`px-7 py-3 rounded-sm bg-brand hover:bg-brand-hover font-bold text-body-sm text-text-primary transition-colors ${saving ? "opacity-70 pointer-events-none" : ""}`}
        >
          {saving ? "Speichert…" : "Speichern"}
        </button>
      </form>
    </Reveal>
  );
}
