import { useState, type FormEvent } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { usePartners } from '@/api/gestion';
import { useAssets, useCreateLocation, useLocations, useUpdateLocation } from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { CarteGeo } from '@/components/carte-geo';
import { StatutEquipement } from '@/components/statut-equipement';
import { Button } from '@/components/ui/button';
import { Modale } from '@/components/ui/modale';

/** Écran 2 des maquettes R1 : identité du site, hiérarchie d'emplacements,
 *  appareils rattachés. Un organe n'apparaît jamais ici : il suit son appareil. */
export default function PageFicheSite() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: locations } = useLocations();
  const { data: assets } = useAssets();
  const { can } = usePermissions();
  const [modaleZone, setModaleZone] = useState(false);

  const site = locations?.find((l) => l.id === id);
  if (!site) return null;
  const zones = (locations ?? []).filter((l) => l.parentId === site.id);
  const appareils = (assets ?? []).filter((a) => a.siteName === site.name);

  return (
    <>
      <div className="filajout">
        <Link to="/sites">Sites</Link> / {site.name}
      </div>
      <div className="entete-page">
        <h1>{site.name}</h1>
        <div className="actions">
          {can('ASSETS', 'create') ? (
            <Button variant="prim" onClick={() => navigate(`/ascenseurs/nouveau?site=${site.id}`)}>
              + Nouvel ascenseur
            </Button>
          ) : null}
        </div>
      </div>
      <div className="grille-2">
        <div className="carte">
          <h2>Identité</h2>
          <dl className="infos">
            <dt>Adresse</dt>
            <dd>{[site.address, site.city].filter(Boolean).join(' — ') || '—'}</dd>
            <dt>Position</dt>
            <dd className="num">
              {site.latitude != null
                ? `${site.latitude} N · ${Math.abs(site.longitude!)} O`
                : 'non posée'}
            </dd>
            <dt>Gardien</dt>
            <dd>
              {site.guardianName ?? '—'}
              {site.guardianPhone ? (
                <span className="num"> · {site.guardianPhone}</span>
              ) : null}
            </dd>
            <dt>Client / syndic</dt>
            <dd>
              <ChampSyndic
                siteId={site.id}
                partnerId={site.partnerId}
                partnerName={site.partnerName}
              />
            </dd>
            <dt>Appareils</dt>
            <dd className="num">{site.assetCount}</dd>
          </dl>
        </div>
        {site.latitude != null && site.longitude != null ? (
          <CarteGeo
            className="min-h-[200px]"
            zoom={15}
            centre={[site.latitude, site.longitude]}
            pins={[{ id: site.id, latitude: site.latitude, longitude: site.longitude, libelle: site.name }]}
          />
        ) : (
          <div className="carte text-encre-3">Position non posée — modifiez le site pour la placer.</div>
        )}
      </div>
      <div className="grille-2">
        <div className="carte">
          <h2>Emplacements & appareils</h2>
          <ul className="arbre">
            <li className="racine">
              <b>{site.name}</b>
              <span className="meta">site</span>
              <span className="fin">{site.assetCount} appareils</span>
            </li>
            {zones.map((zone) => (
              <li key={zone.id}>
                <b>{zone.name}</b>
                <span className="meta">zone</span>
                <span className="fin">
                  {appareils
                    .filter((a) => a.locationId === zone.id)
                    .map((a) => a.reference)
                    .join(' · ') || '—'}
                </span>
              </li>
            ))}
          </ul>
          {can('LOCATIONS', 'create') ? (
            <Button variant="ghost" className="mt-2" onClick={() => setModaleZone(true)}>
              + Ajouter un emplacement
            </Button>
          ) : null}
        </div>
        <div className="carte">
          <h2>Ascenseurs du site</h2>
          {appareils.map((a) => (
            <div className="item-liste" key={a.id}>
              <Link to={`/ascenseurs/${a.id}`} style={{ color: 'var(--primaire)', fontWeight: 600 }}>
                {a.reference} — {a.brand} {a.model ?? ''}
              </Link>
              <span className="fin">
                <StatutEquipement statut={a.status} />
              </span>
            </div>
          ))}
          {appareils.length === 0 ? (
            <p className="text-encre-3">Aucun appareil rattaché pour l’instant.</p>
          ) : null}
        </div>
      </div>
      <NouvelleZone siteId={site.id} ouverte={modaleZone} surFermeture={setModaleZone} />
    </>
  );
}

/** Rattachement du site à son client/syndic (colonne « Rattachements » des
 *  Tiers). Éditable si LOCATIONS.edit ET si la matrice donne accès aux tiers
 *  (la liste des tiers est sous PURCHASE_ORDERS.view) — sinon, lecture seule. */
function ChampSyndic({
  siteId,
  partnerId,
  partnerName,
}: {
  siteId: string;
  partnerId: string | null;
  partnerName: string | null;
}) {
  const { can } = usePermissions();
  const editable = can('LOCATIONS', 'edit') && can('PURCHASE_ORDERS', 'view');
  const { data: partners } = usePartners(editable);
  const maj = useUpdateLocation(siteId);

  if (!editable) return <>{partnerName ?? '—'}</>;
  const clients = (partners ?? []).filter((p) => p.kind === 'CLIENT' && p.isActive);
  return (
    <select
      aria-label="Client / syndic du site"
      value={partnerId ?? ''}
      onChange={(e) => maj.mutate({ partnerId: e.target.value || null })}
      disabled={maj.isPending}
    >
      <option value="">—</option>
      {clients.map((c) => (
        <option key={c.id} value={c.id}>{c.name}</option>
      ))}
    </select>
  );
}

function NouvelleZone({
  siteId,
  ouverte,
  surFermeture,
}: {
  siteId: string;
  ouverte: boolean;
  surFermeture: (o: boolean) => void;
}) {
  const creation = useCreateLocation();
  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const nom = String(new FormData(e.currentTarget).get('name'));
    creation.mutate(
      { name: nom, parentId: siteId },
      { onSuccess: () => surFermeture(false) },
    );
  };
  return (
    <Modale titre="Ajouter un emplacement" ouverte={ouverte} surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="nz-nom">Nom de la zone *</label>
          <input id="nz-nom" name="name" required placeholder="Ex. : Hall principal" />
        </div>
        <p className="note-douce">
          Hiérarchie limitée à deux niveaux : site → zone. Les organes, eux,
          suivent leur appareil — jamais d’emplacement propre.
        </p>
        {creation.isError ? (
          <p className="erreur-form" role="alert">{creation.error.message}</p>
        ) : null}
        <div className="pied">
          <Button onClick={() => surFermeture(false)}>Annuler</Button>
          <Button type="submit" variant="prim" disabled={creation.isPending}>
            Ajouter
          </Button>
        </div>
      </form>
    </Modale>
  );
}
