"use client";

import { useState } from "react";
import Link from "next/link";
import VillaLogo from "@/components/VillaLogo";
import { useRouter } from "next/navigation";
import { clientExecute } from "@/lib/api/client";
import { ApiError } from "@/lib/api/shared";
import { useAuth } from "@/lib/auth-context";
import type { AuthToken } from "@/lib/types";

type Step = "account" | "property" | "rooms" | "review" | "submitted";

interface AccountInfo {
  name: string;
  email: string;
  phone: string;
  password: string;
  role: "owner" | "manager";
  ownerName: string;
  ownerPhone: string;
  ownerEmail: string;
}

interface PropertyInfo {
  propertyName: string;
  type: "hotel" | "guesthouse" | "lodge" | "serviced-apartment";
  town: string;
  address: string;
  latitude: string;
  longitude: string;
  description: string;
  checkIn: string;
  checkOut: string;
  depositPercent: string;
  cancellationPolicy: string;
  amenities: string[];
}

interface RoomInfo {
  id: string;
  name: string;
  capacity: string;
  pricePerNight: string;
  description: string;
}

const AMENITIES_OPTIONS = [
  "Free Wi-Fi", "Air conditioning", "Hot water", "Parking", "24h security",
  "Generator backup", "Breakfast available", "Restaurant", "DSTV / Cable TV",
  "Laundry service", "Room service", "Swimming pool", "Conference room",
  "Bar", "Fridge", "Kitchenette", "Washing machine", "CCTV",
];

const STEPS: { id: Step; label: string }[] = [
  { id: "account",   label: "Your account" },
  { id: "property",  label: "Property details" },
  { id: "rooms",     label: "Room types" },
  { id: "review",    label: "Review & submit" },
];

function FieldLabel({ children }: { children: React.ReactNode }) {
  return <label className="block font-mono text-xs uppercase tracking-widest text-ink-soft mb-2">{children}</label>;
}

function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input className="w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold focus:border-forest" {...props} />;
}

function Select({ children, ...props }: React.SelectHTMLAttributes<HTMLSelectElement> & { children: React.ReactNode }) {
  return <select className="w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold focus:border-forest" {...props}>{children}</select>;
}

function Btn({ children, onClick, variant = "primary", disabled = false }: {
  children: React.ReactNode; onClick?: () => void; variant?: "primary" | "ghost"; disabled?: boolean;
}) {
  return (
    <button type="button" onClick={onClick} disabled={disabled}
      className={`inline-flex items-center justify-center gap-2 font-semibold text-sm px-6 py-3 rounded-pill transition-colors disabled:opacity-40 ${
        variant === "primary" ? "bg-forest text-white hover:bg-forest-deep" : "border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white"
      }`}>
      {children}
    </button>
  );
}

function StepProgress({ current }: { current: Step }) {
  const idx = STEPS.findIndex((s) => s.id === current);
  return (
    <div className="flex items-center gap-0 mb-8">
      {STEPS.map((s, i) => {
        const done = i < idx; const active = i === idx;
        return (
          <div key={s.id} className="flex items-center flex-1 last:flex-none">
            <div className="flex flex-col items-center gap-1.5">
              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-colors ${
                done ? "bg-forest text-white" : active ? "bg-gold text-forest-deep" : "bg-mist text-ink-soft"
              }`}>
                {done ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="w-4 h-4"><path d="M5 12l5 5 9-11" strokeLinecap="round" strokeLinejoin="round" /></svg> : i + 1}
              </div>
              <span className={`text-[10px] font-mono uppercase tracking-wider whitespace-nowrap hidden sm:block ${active ? "text-gold-deep font-semibold" : done ? "text-forest" : "text-ink-soft"}`}>{s.label}</span>
            </div>
            {i < STEPS.length - 1 && <div className={`flex-1 h-0.5 mx-2 ${done ? "bg-forest" : "bg-mist"}`} />}
          </div>
        );
      })}
    </div>
  );
}

export default function StayRegisterPage() {
  const router = useRouter();
  const { adoptSession } = useAuth();
  const [step, setStep] = useState<Step>("account");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [account, setAccount] = useState<AccountInfo>({
    name: "", email: "", phone: "", password: "", role: "owner",
    ownerName: "", ownerPhone: "", ownerEmail: "",
  });

  const [property, setProperty] = useState<PropertyInfo>({
    propertyName: "", type: "guesthouse", town: "Akim Oda", address: "",
    latitude: "", longitude: "",
    description: "", checkIn: "12:00", checkOut: "11:00",
    depositPercent: "30", cancellationPolicy: "Free cancellation up to 24 hours before check-in.",
    amenities: [],
  });

  const [rooms, setRooms] = useState<RoomInfo[]>([
    { id: "r1", name: "", capacity: "2", pricePerNight: "", description: "" },
  ]);

  function toggleAmenity(a: string) {
    setProperty((p) => ({
      ...p,
      amenities: p.amenities.includes(a) ? p.amenities.filter((x) => x !== a) : [...p.amenities, a],
    }));
  }

  function addRoom() {
    setRooms((prev) => [...prev, { id: `r${Date.now()}`, name: "", capacity: "2", pricePerNight: "", description: "" }]);
  }

  function removeRoom(id: string) {
    setRooms((prev) => prev.filter((r) => r.id !== id));
  }

  function updateRoom(id: string, k: keyof RoomInfo, v: string) {
    setRooms((prev) => prev.map((r) => r.id === id ? { ...r, [k]: v } : r));
  }

  const accountValid = account.name && account.email && account.phone && account.password;
  const propertyValid = property.propertyName && property.address && property.description && property.amenities.length > 0;
  const roomsValid = rooms.length > 0 && rooms.every((r) => r.name && r.pricePerNight);

  async function handleSubmit() {
    setSubmitting(true);
    setError(null);
    try {
      const res = await clientExecute<{ token: AuthToken }>("accommodation.register", {
        ownerAccount: {
          name: account.name, email: account.email, phone: account.phone, password: account.password, role: account.role,
          ownerName: account.ownerName || undefined, ownerPhone: account.ownerPhone || undefined, ownerEmail: account.ownerEmail || undefined,
        },
        property: {
          propertyName: property.propertyName, type: property.type, town: property.town, address: property.address,
          latitude: property.latitude || undefined, longitude: property.longitude || undefined,
          description: property.description, checkIn: property.checkIn, checkOut: property.checkOut,
          depositPercent: property.depositPercent, cancellationPolicy: property.cancellationPolicy, amenities: property.amenities,
        },
        rooms: rooms.map((r) => ({ name: r.name, capacity: r.capacity, pricePerNight: r.pricePerNight, description: r.description || undefined })),
      });
      await adoptSession(res.token); // log the new owner in
      setStep("submitted");
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "Registration failed. Please try again.");
    } finally {
      setSubmitting(false);
    }
  }

  if (step === "submitted") {
    return (
      <div className="max-w-xl mx-auto px-6 py-20 text-center">
        <div className="w-20 h-20 rounded-full bg-[#E8F2EC] flex items-center justify-center mx-auto mb-6">
          <svg viewBox="0 0 24 24" fill="none" stroke="#1E4A3D" strokeWidth="2" className="w-10 h-10">
            <path d="M5 12l5 5 9-11" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">Registration submitted</div>
        <h1 className="font-display font-semibold text-2xl text-forest-deep mb-3">
          Welcome to Villa Stay, {account.name.split(" ")[0]}
        </h1>
        <p className="text-ink-soft mb-2">
          Your property <strong className="text-forest-deep">{property.propertyName}</strong> has been submitted. The next step is to complete your identity verification (KYC) so Villa can verify you as the property owner.
        </p>
        <p className="text-ink-soft mb-5 text-sm">
          Your property will go live on Villa Stay once both your listing and your KYC are approved.
        </p>
        <div className="bg-[#FBF1E1] border border-gold rounded-md px-5 py-4 text-sm text-gold-deep mb-5 text-left max-w-sm mx-auto">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-4 h-4 inline-block mr-1.5 -mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2" strokeLinecap="round"/></svg><strong>Next step required:</strong> Complete your identity verification (KYC) to activate your listing.
        </div>

        <div className="bg-white border border-mist rounded-md p-5 mb-8 text-left max-w-sm mx-auto">
          <div className="font-mono text-xs uppercase tracking-widest text-ink-soft mb-3">What happens next</div>
          {[
            { n: "1", label: "Photo review", desc: "Villa checks your listing details and room photos" },
            { n: "2", label: "KYC verification", desc: "We verify your identity as the property owner" },
            { n: "3", label: "Go live", desc: "Your property appears on Villa Stay for guests to book" },
          ].map(({ n, label, desc }) => (
            <div key={n} className="flex gap-3 py-3 border-b border-mist last:border-b-0">
              <div className="w-6 h-6 rounded-full bg-mist flex items-center justify-center text-xs font-bold text-forest-deep shrink-0">{n}</div>
              <div>
                <div className="text-sm font-semibold text-ink">{label}</div>
                <div className="text-xs text-ink-soft">{desc}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <button onClick={() => router.push("/stay/kyc")}
            className="inline-flex items-center justify-center font-semibold text-sm px-6 py-3 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors">
            Complete identity verification (KYC)
          </button>
          <Link href="/stay"
            className="inline-flex items-center justify-center font-semibold text-sm px-6 py-3 rounded-pill border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white transition-colors">
            Browse Villa Stay
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-2xl mx-auto px-6 py-12">
      {/* Header */}
      <div className="mb-8">
        <Link href="/"><VillaLogo size="sm" className="mb-6" /></Link>
        <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">Villa Stay</div>
        <h1 className="font-display font-semibold text-3xl text-forest-deep mb-1">Register your property</h1>
        <p className="text-ink-soft text-sm">
          List your hotel, guesthouse, or lodge on Villa Stay. Free to register — Villa earns a small commission only when you receive a booking.
        </p>
      </div>

      <StepProgress current={step} />

      <div className="bg-white border border-mist rounded-lg p-6 sm:p-8 shadow-card">

        {/* Step 1 — Account */}
        {step === "account" && (
          <div>
            <h2 className="font-display font-semibold text-2xl text-forest-deep mb-1">Create your account</h2>
            <p className="text-sm text-ink-soft mb-6">This will be your login for the Villa Stay owner dashboard.</p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div className="sm:col-span-2">
                <FieldLabel>I am the property</FieldLabel>
                <div className="grid grid-cols-2 gap-3">
                  {(["owner", "manager"] as const).map((r) => (
                    <button key={r} type="button" onClick={() => setAccount((a) => ({ ...a, role: r }))}
                      className={`text-left border rounded-md p-3 transition-colors text-sm ${account.role === r ? "border-forest bg-[#E8F2EC]" : "border-mist bg-white hover:border-forest"}`}>
                      <div className="font-semibold text-forest-deep capitalize">{r}</div>
                      <div className="text-xs text-ink-soft mt-0.5">{r === "owner" ? "I own this property" : "I manage it on behalf of the owner"}</div>
                    </button>
                  ))}
                </div>
              </div>
              <div className="sm:col-span-2">
                <FieldLabel>Full name</FieldLabel>
                <Input value={account.name} onChange={(e) => setAccount((a) => ({ ...a, name: e.target.value }))} placeholder="Your full name" />
              </div>
              <div>
                <FieldLabel>Email address</FieldLabel>
                <Input type="email" value={account.email} onChange={(e) => setAccount((a) => ({ ...a, email: e.target.value }))} placeholder="you@example.com" />
              </div>
              <div>
                <FieldLabel>Phone number</FieldLabel>
                <Input type="tel" value={account.phone} onChange={(e) => setAccount((a) => ({ ...a, phone: e.target.value }))} placeholder="024 000 0000" />
              </div>
              <div className="sm:col-span-2">
                <FieldLabel>Password</FieldLabel>
                <Input type="password" value={account.password} onChange={(e) => setAccount((a) => ({ ...a, password: e.target.value }))} placeholder="••••••••" />
              </div>

              {/* Manager-only: property owner details */}
              {account.role === "manager" && (
                <div className="sm:col-span-2">
                  <div className="bg-[#FBF1E1] border border-gold rounded-sm px-4 py-3 text-xs text-gold-deep mb-4">
                    <strong>Manager registration:</strong> Because you are registering on behalf of the property owner, we need the owner&apos;s details for our records. This protects the owner and is required by Villa&apos;s property transfer policy.
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="sm:col-span-2">
                      <FieldLabel>Property owner&apos;s full name</FieldLabel>
                      <Input value={account.ownerName} onChange={(e) => setAccount((a) => ({ ...a, ownerName: e.target.value }))} placeholder="Full legal name of the property owner" />
                    </div>
                    <div>
                      <FieldLabel>Owner&apos;s phone number</FieldLabel>
                      <Input type="tel" value={account.ownerPhone} onChange={(e) => setAccount((a) => ({ ...a, ownerPhone: e.target.value }))} placeholder="024 000 0000" />
                    </div>
                    <div>
                      <FieldLabel>Owner&apos;s email (optional)</FieldLabel>
                      <Input type="email" value={account.ownerEmail} onChange={(e) => setAccount((a) => ({ ...a, ownerEmail: e.target.value }))} placeholder="owner@example.com" />
                    </div>
                  </div>
                  <p className="text-xs text-ink-soft mt-2">Villa stores the owner&apos;s contact details independently. If a property needs to be transferred to a new manager, the owner can initiate this through Villa using these details.</p>
                </div>
              )}
            </div>

            <div className="mt-6 bg-sage border border-mist rounded-sm px-4 py-3 text-xs text-ink-soft">
              Already have a Villa account? <Link href="/login" className="text-forest font-semibold hover:underline">Log in instead</Link>
            </div>

            <div className="mt-6 flex justify-end">
              <Btn onClick={() => setStep("property")} disabled={!accountValid}>Continue to property details →</Btn>
            </div>
          </div>
        )}

        {/* Step 2 — Property details */}
        {step === "property" && (
          <div>
            <h2 className="font-display font-semibold text-2xl text-forest-deep mb-1">Property details</h2>
            <p className="text-sm text-ink-soft mb-6">Tell guests about your property. This will appear on your Villa Stay listing.</p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div className="sm:col-span-2">
                <FieldLabel>Property name</FieldLabel>
                <Input value={property.propertyName} onChange={(e) => setProperty((p) => ({ ...p, propertyName: e.target.value }))} placeholder="e.g. Oda Royal Guesthouse" />
              </div>
              <div>
                <FieldLabel>Property type</FieldLabel>
                <Select value={property.type} onChange={(e) => setProperty((p) => ({ ...p, type: e.target.value as PropertyInfo["type"] }))}>
                  <option value="hotel">Hotel</option>
                  <option value="guesthouse">Guesthouse</option>
                  <option value="lodge">Lodge</option>
                  <option value="serviced-apartment">Serviced Apartment</option>
                </Select>
              </div>
              <div>
                <FieldLabel>Town</FieldLabel>
                <Select value={property.town} onChange={(e) => setProperty((p) => ({ ...p, town: e.target.value }))}>
                  <option>Akim Oda</option>
                  <option>New Tafo</option>
                  <option>Kade</option>
                  <option>Asamankese</option>
                </Select>
              </div>
              <div className="sm:col-span-2">
                <FieldLabel>Street / area address</FieldLabel>
                <Input value={property.address} onChange={(e) => setProperty((p) => ({ ...p, address: e.target.value }))} placeholder="e.g. Hospital Road, Akim Oda" />
              </div>

              {/* Location coordinates */}
              <div className="sm:col-span-2">
                <FieldLabel>Property location (GPS coordinates)</FieldLabel>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Input value={property.latitude} onChange={(e) => setProperty((p) => ({ ...p, latitude: e.target.value }))} placeholder="Latitude e.g. 5.9231" />
                  </div>
                  <div>
                    <Input value={property.longitude} onChange={(e) => setProperty((p) => ({ ...p, longitude: e.target.value }))} placeholder="Longitude e.g. -0.9887" />
                  </div>
                </div>
                <div className="mt-2 flex items-center gap-3">
                  <button type="button"
                    onClick={() => {
                      if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition((pos) => {
                          setProperty((p) => ({
                            ...p,
                            latitude: pos.coords.latitude.toFixed(6),
                            longitude: pos.coords.longitude.toFixed(6),
                          }));
                        });
                      }
                    }}
                    className="inline-flex items-center gap-2 text-xs font-semibold text-forest border border-forest/30 bg-[#E8F2EC] px-3 py-1.5 rounded-pill hover:bg-forest hover:text-white transition-colors">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3.5 h-3.5">
                      <circle cx="12" cy="12" r="3" /><path d="M12 1v4M12 19v4M1 12h4M19 12h4" strokeLinecap="round" />
                    </svg>
                    Use my current location
                  </button>
                  <span className="text-xs text-ink-soft">or enter coordinates manually. Find yours at maps.google.com</span>
                </div>
              </div>
              <div className="sm:col-span-2">
                <FieldLabel>Description</FieldLabel>
                <textarea value={property.description} onChange={(e) => setProperty((p) => ({ ...p, description: e.target.value }))}
                  placeholder="Describe your property — location, atmosphere, who it's suited for, and what makes it special."
                  rows={4} className="w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold resize-none" />
              </div>
              <div>
                <FieldLabel>Check-in time</FieldLabel>
                <Input type="time" value={property.checkIn} onChange={(e) => setProperty((p) => ({ ...p, checkIn: e.target.value }))} />
              </div>
              <div>
                <FieldLabel>Check-out time</FieldLabel>
                <Input type="time" value={property.checkOut} onChange={(e) => setProperty((p) => ({ ...p, checkOut: e.target.value }))} />
              </div>
              <div>
                <FieldLabel>Deposit required (%)</FieldLabel>
                <Select value={property.depositPercent} onChange={(e) => setProperty((p) => ({ ...p, depositPercent: e.target.value }))}>
                  <option value="0">No deposit — pay on arrival</option>
                  <option value="25">25% deposit</option>
                  <option value="30">30% deposit</option>
                  <option value="50">50% deposit</option>
                  <option value="100">Full payment upfront</option>
                </Select>
              </div>
              <div>
                <FieldLabel>Cancellation policy</FieldLabel>
                <Select value={property.cancellationPolicy} onChange={(e) => setProperty((p) => ({ ...p, cancellationPolicy: e.target.value }))}>
                  <option>Free cancellation up to 24 hours before check-in.</option>
                  <option>Free cancellation up to 48 hours before check-in.</option>
                  <option>Free cancellation up to 72 hours before check-in.</option>
                  <option>No refunds on cancellations.</option>
                </Select>
              </div>

              <div className="sm:col-span-2">
                <FieldLabel>Amenities — select all that apply</FieldLabel>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  {AMENITIES_OPTIONS.map((a) => (
                    <label key={a} className={`flex items-center gap-2 text-sm cursor-pointer p-2.5 rounded-sm border transition-colors ${property.amenities.includes(a) ? "border-forest bg-[#E8F2EC]" : "border-mist hover:border-forest"}`}>
                      <input type="checkbox" checked={property.amenities.includes(a)} onChange={() => toggleAmenity(a)} className="accent-forest w-4 h-4" />
                      {a}
                    </label>
                  ))}
                </div>
              </div>
            </div>

            <div className="mt-8 flex justify-between">
              <Btn variant="ghost" onClick={() => setStep("account")}>← Back</Btn>
              <Btn onClick={() => setStep("rooms")} disabled={!propertyValid}>Continue to rooms →</Btn>
            </div>
          </div>
        )}

        {/* Step 3 — Room types */}
        {step === "rooms" && (
          <div>
            <h2 className="font-display font-semibold text-2xl text-forest-deep mb-1">Room types</h2>
            <p className="text-sm text-ink-soft mb-6">Add the types of rooms your property offers. Each room type can have its own price and capacity.</p>

            <div className="flex flex-col gap-5">
              {rooms.map((room, i) => (
                <div key={room.id} className="border border-mist rounded-md p-5 relative">
                  <div className="flex justify-between items-center mb-4">
                    <span className="font-semibold text-sm text-forest-deep">Room type {i + 1}</span>
                    {rooms.length > 1 && (
                      <button type="button" onClick={() => removeRoom(room.id)} className="text-xs text-clay hover:underline">Remove</button>
                    )}
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="sm:col-span-2">
                      <FieldLabel>Room type name</FieldLabel>
                      <Input value={room.name} onChange={(e) => updateRoom(room.id, "name", e.target.value)} placeholder="e.g. Standard Room, Deluxe Suite, Family Room" />
                    </div>
                    <div>
                      <FieldLabel>Price per night (GH₵)</FieldLabel>
                      <Input type="number" value={room.pricePerNight} onChange={(e) => updateRoom(room.id, "pricePerNight", e.target.value)} placeholder="e.g. 180" />
                    </div>
                    <div>
                      <FieldLabel>Maximum guests</FieldLabel>
                      <Select value={room.capacity} onChange={(e) => updateRoom(room.id, "capacity", e.target.value)}>
                        {[1, 2, 3, 4, 5, 6].map((n) => <option key={n} value={String(n)}>{n} guest{n !== 1 ? "s" : ""}</option>)}
                      </Select>
                    </div>
                    <div className="sm:col-span-2">
                      <FieldLabel>Room description</FieldLabel>
                      <textarea value={room.description} onChange={(e) => updateRoom(room.id, "description", e.target.value)}
                        placeholder="Describe this room — furnishings, view, bathroom type, special features."
                        rows={2} className="w-full border border-mist rounded-sm px-4 py-3 text-sm bg-white text-ink focus:outline-2 focus:outline-gold resize-none" />
                    </div>
                  </div>
                </div>
              ))}

              <button type="button" onClick={addRoom}
                className="inline-flex items-center gap-2 font-semibold text-sm px-5 py-3 rounded-pill border-2 border-dashed border-mist text-forest hover:border-forest transition-colors">
                + Add another room type
              </button>
            </div>

            <div className="mt-8 flex justify-between">
              <Btn variant="ghost" onClick={() => setStep("property")}>← Back</Btn>
              <Btn onClick={() => setStep("review")} disabled={!roomsValid}>Review & submit →</Btn>
            </div>
          </div>
        )}

        {/* Step 4 — Review */}
        {step === "review" && (
          <div>
            <h2 className="font-display font-semibold text-2xl text-forest-deep mb-1">Review & submit</h2>
            <p className="text-sm text-ink-soft mb-6">Check your details before submitting. Villa will review your listing within 1–2 business days.</p>

            <div className="flex flex-col gap-5 mb-6">
              {/* Account summary */}
              <div className="bg-sage border border-mist rounded-md p-5">
                <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-3">Your account</div>
                {[["Name", account.name], ["Email", account.email], ["Phone", account.phone], ["Role", account.role]].map(([l, v]) => (
                  <div key={l} className="flex justify-between py-2 border-b border-mist last:border-b-0 text-sm">
                    <span className="text-ink-soft">{l}</span><span className="font-medium">{v}</span>
                  </div>
                ))}
              </div>

              {/* Property summary */}
              <div className="bg-sage border border-mist rounded-md p-5">
                <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-3">Property details</div>
                {[
                  ["Name", property.propertyName],
                  ["Type", property.type],
                  ["Town", property.town],
                  ["Address", property.address],
                  ["Check-in", property.checkIn],
                  ["Check-out", property.checkOut],
                  ["Deposit", property.depositPercent === "0" ? "Pay on arrival" : `${property.depositPercent}%`],
                  ["Amenities", property.amenities.join(", ")],
                ].map(([l, v]) => (
                  <div key={l} className="flex justify-between gap-4 py-2 border-b border-mist last:border-b-0 text-sm">
                    <span className="text-ink-soft shrink-0">{l}</span><span className="font-medium text-right">{v}</span>
                  </div>
                ))}
              </div>

              {/* Rooms summary */}
              <div className="bg-sage border border-mist rounded-md p-5">
                <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-3">{rooms.length} room type{rooms.length !== 1 ? "s" : ""}</div>
                {rooms.map((r) => (
                  <div key={r.id} className="flex justify-between py-2 border-b border-mist last:border-b-0 text-sm">
                    <span className="font-medium">{r.name}</span>
                    <span className="text-ink-soft">GH₵ {r.pricePerNight}/night · {r.capacity} guest{Number(r.capacity) !== 1 ? "s" : ""}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-[#FBF1E1] border border-gold rounded-sm px-4 py-3 text-xs text-gold-deep mb-6">
              By submitting, you confirm that you are authorised to list this property and that all details are accurate. Villa will verify your identity as part of the review process.
            </div>

            {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
            <div className="flex justify-between">
              <Btn variant="ghost" onClick={() => setStep("rooms")}>← Back</Btn>
              <Btn onClick={handleSubmit} disabled={submitting}>{submitting ? "Submitting…" : "Submit for review"}</Btn>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}