import { QRCodeSVG } from 'qrcode.react';
import { useState, type FormEvent } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { ASSET_STATUS_LABELS, ASSET_STATUSES, type AssetStatus } from '@siop/shared';
import { useWorkOrders } from '@/api/exploitation';
import {
  useAddComponent,
  useAsset,
  useCategories,
  useRemoveComponent,
  useUpdateAsset,
} from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { CarteDocuments } from '@/components/carte-documents';
import { StatutOT } from '@/components/chips-ot';
import { StatutEquipement } from '@/components/statut-equipement';
import { Button } from '@/components/ui/button';
import { Modale } from '@/components/ui/modale';
import { formatDateFr } from '@/lib/lieux';

/** Fiche appareil — écran validé en R0 (maquette-web, écran 5) ; historique
 *  réel depuis R2, documents réels depuis R3. */
export default function PageFicheAscenseur() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { data: asset } = useAsset(id);
  const { can } = usePermissions();
  const [modaleOrgane, setModaleOrgane] = useState(false);
  const retrait = useRemoveComponent(id ?? '');
  const majStatut = useUpdateAsset(id ?? '');

  if (!asset) return null;

  return (
    <>
      <div className="filajout">
        <Link to="/ascenseurs">Ascenseurs</Link> / Ascenseur {asset.reference}
      </div>
      <div className="entete-page">
        <h1>
          Ascenseur {asset.reference} — {asset.brand} {asset.model ?? ''}
        </h1>
        <StatutEquipement statut={asset.status} />
        <div className="actions">
          {can('ASSETS', 'edit') ? (
            <select
              aria-label="Changer le statut"
              className="btn"
              value={asset.status}
              onChange={(e) => majStatut.mutate({ status: e.target.value as AssetStatus })}
            >
              {ASSET_STATUSES.map((s) => (
                <option key={s} value={s}>{ASSET_STATUS_LABELS[s]}</option>
              ))}
            </select>
          ) : null}
          <Button onClick={() => navigate(`/ascenseurs/${asset.id}/compteurs`)}>
            Compteurs
          </Button>
          <Button onClick={() => navigate(`/ascenseurs/${asset.id}/etiquette`)}>
            Étiquette QR
          </Button>
        </div>
      </div>
      <div className="grille-2">
        <div className="carte">
          <h2>Identité</h2>
          <dl className="infos">
            <dt>N° de série</dt>
            <dd className="num">{asset.serialNumber ?? '—'}</dd>
            <dt>Marque · modèle</dt>
            <dd>{asset.brand} — {asset.model ?? '—'}</dd>
            <dt>Mise en service</dt>
            <dd className="num">{formatDateFr(asset.commissionedAt)}</dd>
            <dt>Site</dt>
            <dd>
              {asset.siteName}
              {asset.locationName !== asset.siteName ? ` — ${asset.locationName}` : ''}
            </dd>
            <dt>Catégorie</dt>
            <dd>{asset.categoryName}</dd>
            <dt>Charge · niveaux</dt>
            <dd className="num">
              {asset.loadKg ? `${asset.loadKg} kg` : '—'} · {asset.floors ?? '—'} niveaux
            </dd>
          </dl>
        </div>
        <div className="carte">
          <h2>Étiquette cabine</h2>
          <div className="flex items-center gap-4">
            <QRCodeSVG
              value={`${window.location.origin}/q/${asset.reference}`}
              size={86}
              marginSize={2}
              className="rounded-lg border border-bordure bg-white p-1"
            />
            <div className="text-[12.5px] text-encre-2">
              Collée en cabine.<br />
              Scan gardien → signalement prérempli (R2).<br />
              Scan technicien → cette fiche.
            </div>
          </div>
        </div>
      </div>
      <div className="grille-2">
        <div className="carte">
          <h2>Organes</h2>
          {asset.components.map((c) => (
            <div className="item-liste" key={c.id}>
              <div>
                <b>{c.typeName}</b>
                {c.designation ? <span className="sous">{c.designation}</span> : null}
              </div>
              <span className="fin">
                {can('ASSETS', 'edit') ? (
                  <button
                    type="button"
                    className="btn-suppr"
                    aria-label={`Retirer ${c.typeName}`}
                    onClick={() => retrait.mutate(c.id)}
                  >
                    ✕
                  </button>
                ) : null}
              </span>
            </div>
          ))}
          {asset.components.length === 0 ? (
            <p className="text-encre-3">Aucun organe déclaré.</p>
          ) : null}
          {can('ASSETS', 'edit') ? (
            <Button variant="ghost" className="mt-2" onClick={() => setModaleOrgane(true)}>
              + Ajouter un organe
            </Button>
          ) : null}
        </div>
        <div className="flex flex-col gap-4">
          <CarteHistorique assetId={asset.id} />
          <CarteDocuments cible={{ assetId: asset.id }} peutEditer={can('ASSETS', 'edit')} />
        </div>
      </div>
      <NouvelOrgane assetId={asset.id} ouverte={modaleOrgane} surFermeture={setModaleOrgane} />
    </>
  );
}

/** Historique récent (écran 5 validé R0) — les OT de CET appareil. */
function CarteHistorique({ assetId }: { assetId: string }) {
  const { can } = usePermissions();
  const { data: workOrders } = useWorkOrders(can('WORK_ORDERS', 'view'));
  const historique = (workOrders ?? []).filter((w) => w.assetId === assetId).slice(0, 4);
  if (!can('WORK_ORDERS', 'view')) return null;
  return (
    <div className="carte">
      <h2>Historique récent</h2>
      {historique.length ? (
        <ul className="chrono">
          {historique.map((w) => (
            <li key={w.id} className="fait">
              <Link to={`/ot/${w.id}`} className="num" style={{ color: 'var(--primaire)', fontWeight: 600 }}>
                {w.reference}
              </Link>{' '}
              · {w.title} — <StatutOT statut={w.status} />
              <br />
              <span className="quand">
                {new Intl.DateTimeFormat('fr-FR', { dateStyle: 'medium' }).format(new Date(w.createdAt))}
              </span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="text-encre-3">Aucune intervention enregistrée.</p>
      )}
    </div>
  );
}

function NouvelOrgane({
  assetId,
  ouverte,
  surFermeture,
}: {
  assetId: string;
  ouverte: boolean;
  surFermeture: (o: boolean) => void;
}) {
  const { data: categories } = useCategories();
  const ajout = useAddComponent(assetId);
  const types = (categories ?? []).filter((c) => c.kind === 'COMPONENT_TYPE' && c.isActive);

  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const donnees = new FormData(e.currentTarget);
    ajout.mutate(
      {
        typeId: String(donnees.get('typeId')),
        designation: String(donnees.get('designation')) || undefined,
      },
      { onSuccess: () => surFermeture(false) },
    );
  };

  return (
    <Modale titre="Ajouter un organe" ouverte={ouverte} surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="no-type">Type d’organe *</label>
          <select id="no-type" name="typeId" required defaultValue="">
            <option value="" disabled>Choisir…</option>
            {types.map((t) => (
              <option key={t.id} value={t.id}>{t.name}</option>
            ))}
          </select>
        </div>
        <div className="champ">
          <label htmlFor="no-designation">Désignation</label>
          <input id="no-designation" name="designation" placeholder="Ex. : Fermator 40/10" />
        </div>
        {ajout.isError ? (
          <p className="erreur-form" role="alert">{ajout.error.message}</p>
        ) : null}
        <div className="pied">
          <Button onClick={() => surFermeture(false)}>Annuler</Button>
          <Button type="submit" variant="prim" disabled={ajout.isPending}>Ajouter</Button>
        </div>
      </form>
    </Modale>
  );
}
