"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { CustomerPicker } from "@/components/CustomerPicker";
import { createProperty, updateProperty } from "@/lib/api";
import type { PropertyDetail, PropertyInput } from "@/lib/types";

function s(v: string): string | undefined {
  const t = v.trim();
  return t === "" ? undefined : t;
}

type V = {
  addressLine1: string;
  addressLine2: string;
  phone1: string;
  phone2: string;
  phone3: string;
  zone: string;
};

function initial(p?: PropertyDetail): V {
  return {
    addressLine1: p?.addressLine1 ?? "",
    addressLine2: p?.addressLine2 ?? "",
    phone1: p?.phone1 ?? "",
    phone2: p?.phone2 ?? "",
    phone3: p?.phone3 ?? "",
    zone: p?.zone ?? "",
  };
}

export function PropertyForm({
  property,
  fixedCustomerId,
  fixedCustomerName,
}: {
  property?: PropertyDetail;
  fixedCustomerId?: string;
  fixedCustomerName?: string;
}) {
  const router = useRouter();
  const editing = !!property;
  const [v, setV] = useState<V>(() => initial(property));
  const [customerId, setCustomerId] = useState(
    property?.customer.id ?? fixedCustomerId ?? "",
  );
  const [customerName, setCustomerName] = useState(
    property?.customer.name ?? fixedCustomerName ?? "",
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function set<K extends keyof V>(k: K, val: V[K]) {
    setV((p) => ({ ...p, [k]: val }));
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!customerId) {
      setError("Seleccione un cliente propietario.");
      return;
    }
    setSaving(true);
    setError(null);
    const base = {
      addressLine1: s(v.addressLine1),
      addressLine2: s(v.addressLine2),
      phone1: s(v.phone1),
      phone2: s(v.phone2),
      phone3: s(v.phone3),
      zone: s(v.zone),
    };
    try {
      const saved = editing
        ? await updateProperty(property!.id, base)
        : await createProperty({ ...base, customerId } as PropertyInput);
      router.push(`/servicios/${saved.id}`);
    } catch (e2) {
      setError((e2 as Error)?.message ?? "No se pudo guardar la propiedad.");
      setSaving(false);
    }
  }

  return (
    <form onSubmit={submit}>
      {error && <div className="state-box state-error">{error}</div>}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h2 className="section-title" style={{ marginBottom: 14 }}>Propiedad</h2>
        <div className="form-grid">
          <label className="field">
            <span className="field-label">Propietario *</span>
            {editing ? (
              <input className="input" value={customerName} disabled />
            ) : (
              <CustomerPicker
                value={customerId}
                valueName={customerName}
                onPick={(id, name) => {
                  setCustomerId(id);
                  setCustomerName(name);
                }}
              />
            )}
          </label>
          <label className="field">
            <span className="field-label">Dirección 1</span>
            <input className="input" value={v.addressLine1}
              onChange={(e) => set("addressLine1", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Dirección 2</span>
            <input className="input" value={v.addressLine2}
              onChange={(e) => set("addressLine2", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Zona</span>
            <input className="input" value={v.zone}
              onChange={(e) => set("zone", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Teléfono 1</span>
            <input className="input" value={v.phone1}
              onChange={(e) => set("phone1", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Teléfono 2</span>
            <input className="input" value={v.phone2}
              onChange={(e) => set("phone2", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Teléfono 3</span>
            <input className="input" value={v.phone3}
              onChange={(e) => set("phone3", e.target.value)} />
          </label>
        </div>
      </div>
      <div className="form-actions">
        <button type="submit" className="btn btn-primary" disabled={saving}>
          {saving ? "Guardando…" : editing ? "Guardar cambios" : "Crear propiedad"}
        </button>
        <button type="button" className="btn btn-outline" onClick={() => router.back()}>
          Cancelar
        </button>
      </div>
    </form>
  );
}
