import { useState, type FormEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCreateLocation, useLocations } from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { CarteGeo } from '@/components/carte-geo';
import { Button } from '@/components/ui/button';
import { Modale } from '@/components/ui/modale';
import { construireArbre } from '@/lib/lieux';

/** Écran 1 des maquettes R1 : liste dense + carte OSM (positions PostGIS). */
export default function PageSites() {
  const navigate = useNavigate();
  const { data: locations } = useLocations();
  const { can } = usePermissions();
  const [modale, setModale] = useState(false);

  const sites = construireArbre(locations ?? []);
  const totalAppareils = sites.reduce((n, s) => n + s.assetCount, 0);

  return (
    <>
      <div className="entete-page">
        <h1>Sites</h1>
        <span className="filajout">
          {sites.length} sites · {totalAppareils} ascenseurs
        </span>
        <div className="actions">
          {can('LOCATIONS', 'create') ? (
            <Button variant="prim" onClick={() => setModale(true)}>
              + Nouveau site
            </Button>
          ) : null}
        </div>
      </div>
      <div className="grille-2">
        <div className="carte" style={{ padding: 0 }}>
          <div className="table">
            <table>
              <thead>
                <tr>
                  <th>Site</th>
                  <th>Ascenseurs</th>
                  <th>Gardien</th>
                  <th>Zones</th>
                </tr>
              </thead>
              <tbody>
                {sites.map((site) => (
                  <tr
                    key={site.id}
                    onClick={() => navigate(`/sites/${site.id}`)}
                    style={{ cursor: 'pointer' }}
                  >
                    <td>
                      <b>{site.name}</b>
                      <span className="sous">
                        {[site.address, site.city].filter(Boolean).join(', ') || '—'}
                      </span>
                    </td>
                    <td className="num">{site.assetCount}</td>
                    <td>{site.guardianName ?? '—'}</td>
                    <td className="num">{site.zones.length}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <CarteGeo
          pins={sites
            .filter((s) => s.latitude != null && s.longitude != null)
            .map((s) => ({
              id: s.id,
              latitude: s.latitude!,
              longitude: s.longitude!,
              libelle: `${s.name} · ${s.assetCount}`,
              onClick: () => navigate(`/sites/${s.id}`),
            }))}
        />
      </div>
      <NouveauSite ouverte={modale} surFermeture={setModale} />
    </>
  );
}

function NouveauSite({
  ouverte,
  surFermeture,
}: {
  ouverte: boolean;
  surFermeture: (o: boolean) => void;
}) {
  const creation = useCreateLocation();
  const navigate = useNavigate();
  const [position, setPosition] = useState<{ lat: number; lng: number } | null>(null);

  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const donnees = new FormData(e.currentTarget);
    creation.mutate(
      {
        name: String(donnees.get('name')),
        address: String(donnees.get('address')) || undefined,
        city: String(donnees.get('city')) || undefined,
        guardianName: String(donnees.get('guardianName')) || undefined,
        guardianPhone: String(donnees.get('guardianPhone')) || undefined,
        latitude: position?.lat,
        longitude: position?.lng,
      },
      {
        onSuccess: (site) => {
          surFermeture(false);
          navigate(`/sites/${site.id}`);
        },
      },
    );
  };

  return (
    <Modale titre="Nouveau site" ouverte={ouverte} surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="ns-nom">Nom du site *</label>
          <input id="ns-nom" name="name" required placeholder="Ex. : Résidence Les Palmiers" />
        </div>
        <div className="form-grille">
          <div className="champ">
            <label htmlFor="ns-adresse">Adresse</label>
            <input id="ns-adresse" name="address" placeholder="Bd, rue…" />
          </div>
          <div className="champ">
            <label htmlFor="ns-ville">Ville</label>
            <input id="ns-ville" name="city" placeholder="Casablanca" />
          </div>
          <div className="champ">
            <label htmlFor="ns-gardien">Gardien</label>
            <input id="ns-gardien" name="guardianName" />
          </div>
          <div className="champ">
            <label htmlFor="ns-tel">Téléphone gardien</label>
            <input id="ns-tel" name="guardianPhone" placeholder="06 …" />
          </div>
        </div>
        <div className="champ">
          <label>Position — cliquez sur la carte</label>
          <CarteGeo
            className="min-h-[180px]"
            zoom={11}
            onClick={(lat, lng) => setPosition({ lat, lng })}
            pins={
              position
                ? [{ id: 'nouveau', latitude: position.lat, longitude: position.lng, libelle: 'Nouveau site' }]
                : []
            }
          />
          <p className="mt-1 text-[12px] text-encre-3 num">
            {position ? `${position.lat} N · ${position.lng} E` : 'Aucune position posée'}
          </p>
        </div>
        {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}>
            Créer le site
          </Button>
        </div>
      </form>
    </Modale>
  );
}