jorgecuadros-platform/apps/web/src/components/PolicyForm.tsx

"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { CustomerPicker } from "@/components/CustomerPicker";
import { createPolicy, getLookups, updatePolicy } from "@/lib/api";
import type {
  Currency,
  LookupsResponse,
  PolicyDetail,
  PolicyInput,
} from "@/lib/types";

function toDateInput(v: string | null | undefined): string {
  if (!v) return "";
  const d = new Date(v);
  return isNaN(d.getTime()) ? "" : d.toISOString().slice(0, 10);
}
function numOrUndef(v: string): number | undefined {
  const t = v.trim();
  if (t === "") return undefined;
  const n = Number(t);
  return isNaN(n) ? undefined : n;
}
function s(v: string): string | undefined {
  const t = v.trim();
  return t === "" ? undefined : t;
}

type V = {
  policyNumber: string;
  policyTypeId: string;
  insuranceProviderId: string;
  agentName: string;
  policyDate: string;
  policyFrom: string;
  policyTo: string;
  netPremium: string;
  policyFee: string;
  brokerFee: string;
  commission: string;
  currency: Currency;
  liquidated: boolean;
  liquidationNumber: string;
  liquidationDate: string;
  endorsement: boolean;
  observations: string;
  notes: string;
};

function initial(p?: PolicyDetail): V {
  return {
    policyNumber: p?.policyNumber ?? "",
    policyTypeId: p?.policyType?.id ?? "",
    insuranceProviderId: p?.insuranceProvider?.id ?? "",
    agentName: p?.agentName ?? "",
    policyDate: toDateInput(p?.policyDate),
    policyFrom: toDateInput(p?.policyFrom),
    policyTo: toDateInput(p?.policyTo),
    netPremium: p?.netPremium != null ? String(p.netPremium) : "",
    policyFee: p?.policyFee != null ? String(p.policyFee) : "",
    brokerFee: p?.brokerFee != null ? String(p.brokerFee) : "",
    commission: p?.commission != null ? String(p.commission) : "",
    currency: (p?.currency as Currency) ?? "MXN",
    liquidated: p?.liquidated ?? false,
    liquidationNumber: p?.liquidationNumber ?? "",
    liquidationDate: toDateInput(p?.liquidationDate),
    endorsement: p?.endorsement ?? false,
    observations: p?.observations ?? "",
    notes: p?.notes ?? "",
  };
}

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

  useEffect(() => {
    getLookups().then(setLookups).catch(() => setLookups(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.");
      return;
    }
    setSaving(true);
    setError(null);
    const base = {
      policyNumber: v.policyNumber.trim(),
      policyTypeId: s(v.policyTypeId),
      insuranceProviderId: s(v.insuranceProviderId),
      agentName: s(v.agentName),
      policyDate: s(v.policyDate),
      policyFrom: s(v.policyFrom),
      policyTo: s(v.policyTo),
      netPremium: numOrUndef(v.netPremium),
      policyFee: numOrUndef(v.policyFee),
      brokerFee: numOrUndef(v.brokerFee),
      commission: numOrUndef(v.commission),
      currency: v.currency,
      liquidated: v.liquidated,
      liquidationNumber: s(v.liquidationNumber),
      liquidationDate: s(v.liquidationDate),
      endorsement: v.endorsement,
      observations: s(v.observations),
      notes: s(v.notes),
    };
    try {
      if (editing) {
        const saved = await updatePolicy(policy!.id, base);
        router.push(`/polizas/${saved.id}`);
      } else {
        const payload: PolicyInput = { ...base, customerId };
        const saved = await createPolicy(payload);
        router.push(`/polizas/${saved.id}`);
      }
    } catch (e2) {
      setError((e2 as Error)?.message ?? "No se pudo guardar la póliza.");
      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 }}>Datos de la póliza</h2>
        <div className="form-grid">
          <label className="field">
            <span className="field-label">Cliente *</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">Número de póliza *</span>
            <input className="input" required value={v.policyNumber}
              onChange={(e) => set("policyNumber", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Tipo</span>
            <select className="select" value={v.policyTypeId}
              onChange={(e) => set("policyTypeId", e.target.value)}>
              <option value="">—</option>
              {lookups?.types.map((t) => (
                <option key={t.id} value={t.id}>{t.name}</option>
              ))}
            </select>
          </label>
          <label className="field">
            <span className="field-label">Aseguradora</span>
            <select className="select" value={v.insuranceProviderId}
              onChange={(e) => set("insuranceProviderId", e.target.value)}>
              <option value="">—</option>
              {lookups?.providers.map((p) => (
                <option key={p.id} value={p.id}>{p.name}</option>
              ))}
            </select>
          </label>
          <label className="field">
            <span className="field-label">Agente</span>
            <input className="input" value={v.agentName}
              onChange={(e) => set("agentName", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Moneda</span>
            <select className="select" value={v.currency}
              onChange={(e) => set("currency", e.target.value as Currency)}>
              <option value="MXN">MXN</option>
              <option value="USD">USD</option>
            </select>
          </label>
        </div>
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h2 className="section-title" style={{ marginBottom: 14 }}>Vigencia y prima</h2>
        <div className="form-grid">
          <label className="field">
            <span className="field-label">Emisión</span>
            <input className="input" type="date" value={v.policyDate}
              onChange={(e) => set("policyDate", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Desde</span>
            <input className="input" type="date" value={v.policyFrom}
              onChange={(e) => set("policyFrom", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Hasta</span>
            <input className="input" type="date" value={v.policyTo}
              onChange={(e) => set("policyTo", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Prima neta</span>
            <input className="input" type="number" step="0.01" value={v.netPremium}
              onChange={(e) => set("netPremium", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Derecho de póliza</span>
            <input className="input" type="number" step="0.01" value={v.policyFee}
              onChange={(e) => set("policyFee", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Comisión</span>
            <input className="input" type="number" step="0.01" value={v.commission}
              onChange={(e) => set("commission", e.target.value)} />
          </label>
        </div>
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h2 className="section-title" style={{ marginBottom: 14 }}>Liquidación</h2>
        <div className="form-grid">
          <label className="field">
            <span className="field-label">Liquidada</span>
            <input type="checkbox" checked={v.liquidated}
              onChange={(e) => set("liquidated", e.target.checked)} />
          </label>
          <label className="field">
            <span className="field-label">Endoso</span>
            <input type="checkbox" checked={v.endorsement}
              onChange={(e) => set("endorsement", e.target.checked)} />
          </label>
          <label className="field">
            <span className="field-label">No. liquidación</span>
            <input className="input" value={v.liquidationNumber}
              onChange={(e) => set("liquidationNumber", e.target.value)} />
          </label>
          <label className="field">
            <span className="field-label">Fecha liquidación</span>
            <input className="input" type="date" value={v.liquidationDate}
              onChange={(e) => set("liquidationDate", e.target.value)} />
          </label>
        </div>
        <label className="field" style={{ marginTop: 14 }}>
          <span className="field-label">Observaciones</span>
          <textarea className="input" rows={2} value={v.observations}
            onChange={(e) => set("observations", e.target.value)} />
        </label>
        <label className="field" style={{ marginTop: 12 }}>
          <span className="field-label">Notas</span>
          <textarea className="input" rows={2} value={v.notes}
            onChange={(e) => set("notes", e.target.value)} />
        </label>
      </div>

      <div className="form-actions">
        <button type="submit" className="btn btn-primary" disabled={saving}>
          {saving ? "Guardando…" : editing ? "Guardar cambios" : "Crear póliza"}
        </button>
        <button type="button" className="btn btn-outline" onClick={() => router.back()}>
          Cancelar
        </button>
      </div>
    </form>
  );
}