import { useEffect, useMemo, useState } from "preact/hooks";

interface PropertyItem {
  id: string;
  title?: string | null;
  address_1?: string | null;
  city?: string | null;
  state?: string | null;
}

interface GuestOnboardingDialogProps {
  properties: PropertyItem[];
  onClose?: () => void;
  defaultRole?: "tenant" | "landlord";
}

export default function GuestOnboardingDialog(
  { properties, onClose, defaultRole }: GuestOnboardingDialogProps,
) {
  const [role, setRole] = useState<"tenant" | "landlord" | "">(
    defaultRole ?? "",
  );
  const [propertyId, setPropertyId] = useState<string>("");

  const canSubmit = useMemo(() => {
    if (role === "landlord") return true;
    if (role === "tenant") return !!propertyId;
    return false;
  }, [role, propertyId]);

  useEffect(() => {
    if (role !== "tenant") setPropertyId("");
  }, [role]);

  return (
    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
      <form
        method="POST"
        class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
      >
        <h3 class="text-xl font-bold">Welcome! Let's get you set up</h3>
        <p class="text-sm text-gray-600">
          Please select how you'll use the app.
        </p>

        <div class="space-y-2">
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              type="radio"
              name="role"
              value="tenant"
              checked={role === "tenant"}
              onChange={() => setRole("tenant")}
            />
            <span>I'm a Tenant</span>
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input
              type="radio"
              name="role"
              value="landlord"
              checked={role === "landlord"}
              onChange={() => setRole("landlord")}
            />
            <span>I'm a Landlord</span>
          </label>
        </div>

        {role === "tenant" && (
          <div class="space-y-1">
            <label for="property_id" class="text-sm font-medium text-gray-700">
              Select your property
            </label>
            <select
              id="property_id"
              name="property_id"
              required
              class="border p-2 rounded w-full"
              value={propertyId}
              onChange={(e) =>
                setPropertyId((e.target as HTMLSelectElement).value)}
            >
              <option value="" disabled>Select a property…</option>
              {properties?.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.title || p.address_1 || "Property"}
                  {p.city ? `, ${p.city}` : ""}
                  {p.state ? `, ${p.state}` : ""}
                </option>
              ))}
            </select>
          </div>
        )}

        <div class="flex justify-end gap-2 pt-2">
          <button
            type="button"
            class="px-4 py-2 rounded border"
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="submit"
            name="sender"
            value="guest_onboarding"
            class={`px-4 py-2 rounded text-white ${
              canSubmit
                ? "bg-blue-600 hover:bg-blue-700"
                : "bg-gray-400 cursor-not-allowed"
            }`}
            disabled={!canSubmit}
          >
            Continue
          </button>
        </div>
      </form>
    </div>
  );
}