import { useState, type FormEvent } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  WORK_ORDER_PRIORITY_LABELS,
  type RequestSummary,
} from '@siop/shared';
import {
  useApproveRequest,
  useCreateRequest,
  useRejectRequest,
  useRequests,
} from '@/api/exploitation';
import { useAssetOptions, useUsers } from '@/api/referentiel';
import { usePermissions } from '@/auth/use-permissions';
import { StatutDemande } from '@/components/chips-ot';
import { Button } from '@/components/ui/button';
import { Modale } from '@/components/ui/modale';

/** Écran 1 des maquettes R2 : la file d'attente + le panneau d'approbation.
 *  Une demande approuvée devient UN OT (1-1) ; un rejet exige un motif. */
export default function PageDemandes() {
  const { data: requests } = useRequests();
  const { can } = usePermissions();
  const [selectionnee, setSelectionnee] = useState<string | null>(null);
  const [modaleSignalement, setModaleSignalement] = useState(false);

  const toutes = requests ?? [];
  const aTraiter = toutes.filter((r) => r.status === 'RECEIVED').length;
  const demande = toutes.find((r) => r.id === selectionnee) ??
    toutes.find((r) => r.status === 'RECEIVED') ?? null;
  const peutTraiter = can('REQUESTS', 'edit');

  return (
    <>
      <div className="entete-page">
        <h1>Demandes</h1>
        <span className="filajout">
          {aTraiter} à traiter · {toutes.length} au total
        </span>
        <div className="actions">
          {can('REQUESTS', 'create') ? (
            <Button variant="prim" onClick={() => setModaleSignalement(true)}>
              + Signaler
            </Button>
          ) : null}
        </div>
      </div>
      <div className="grille-2" style={{ gridTemplateColumns: peutTraiter ? '1.4fr 1fr' : '1fr' }}>
        <div className="carte" style={{ padding: 0 }}>
          <div className="table">
            <table>
              <thead>
                <tr>
                  <th>N°</th>
                  <th>Signalement</th>
                  <th>Équipement · Site</th>
                  <th>Par</th>
                  <th>Statut</th>
                </tr>
              </thead>
              <tbody>
                {toutes.map((r) => (
                  <tr
                    key={r.id}
                    className={r.isPersonTrapped && r.status === 'RECEIVED' ? 'ligne-bloque' : undefined}
                    style={{
                      cursor: peutTraiter ? 'pointer' : undefined,
                      background: r.id === demande?.id && peutTraiter ? 'var(--primaire-doux)' : undefined,
                    }}
                    onClick={() => setSelectionnee(r.id)}
                  >
                    <td className="ref num">{r.reference}</td>
                    <td>{r.isPersonTrapped ? <b>{r.description}</b> : r.description}</td>
                    <td>
                      Asc. {r.assetReference}
                      <span className="sous">{r.siteName}</span>
                    </td>
                    <td>{r.requesterLabel}</td>
                    <td>
                      {r.workOrder ? (
                        <Link to={`/ot/${r.workOrder.id}`} onClick={(e) => e.stopPropagation()}>
                          <StatutDemande statut={r.status} otStatut={r.workOrder.status} />
                        </Link>
                      ) : (
                        <StatutDemande statut={r.status} />
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        {peutTraiter && demande ? <PanneauApprobation demande={demande} /> : null}
      </div>
      <ModaleSignalement ouverte={modaleSignalement} surFermeture={setModaleSignalement} />
    </>
  );
}

function PanneauApprobation({ demande }: { demande: RequestSummary }) {
  const navigate = useNavigate();
  const { data: users } = useUsers();
  const approbation = useApproveRequest();
  const rejet = useRejectRequest();
  const [motif, setMotif] = useState<string | null>(null); // null = fermé
  const [priorite, setPriorite] = useState('HIGH');
  const [assigne, setAssigne] = useState('');
  const techniciens = (users ?? []).filter(
    (u) => u.status === 'active' && u.role.name.startsWith('Technicien'),
  );
  const traitee = demande.status !== 'RECEIVED';

  return (
    <div className="panneau">
      <h2 style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--encre-2)' }}>
        {demande.reference} — {traitee ? 'déjà traitée' : 'approbation'}
      </h2>
      <dl className="infos" style={{ gridTemplateColumns: '110px 1fr' }}>
        <dt>Équipement</dt>
        <dd>
          <Link to={`/ascenseurs/${demande.assetId}`} style={{ color: 'var(--primaire)', fontWeight: 600 }}>
            Ascenseur {demande.assetReference}
          </Link>{' '}
          — {demande.siteName}
        </dd>
        <dt>Signalé par</dt>
        <dd>{demande.requesterLabel}</dd>
        <dt>Description</dt>
        <dd>« {demande.description} »</dd>
        {demande.rejectionReason ? (
          <>
            <dt>Motif du rejet</dt>
            <dd>{demande.rejectionReason}</dd>
          </>
        ) : null}
      </dl>
      {!traitee ? (
        <>
          <div className="champ">
            <label htmlFor="app-prio">Priorité de l'OT</label>
            <select
              id="app-prio"
              value={demande.isPersonTrapped ? 'PERSON_TRAPPED' : priorite}
              disabled={demande.isPersonTrapped}
              onChange={(e) => setPriorite(e.target.value)}
            >
              {(['LOW', 'MEDIUM', 'HIGH', 'PERSON_TRAPPED'] as const).map((p) => (
                <option key={p} value={p}>{WORK_ORDER_PRIORITY_LABELS[p]}</option>
              ))}
            </select>
          </div>
          <div className="champ">
            <label htmlFor="app-assigne">Assigner à</label>
            <select id="app-assigne" value={assigne} onChange={(e) => setAssigne(e.target.value)}>
              <option value="">— plus tard —</option>
              {techniciens.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.displayName}
                  {t.teams.length ? ` — équipe ${t.teams[0]!.name}` : ''}
                </option>
              ))}
            </select>
          </div>
          {(approbation.isError || rejet.isError) ? (
            <p className="erreur-form" role="alert">
              {approbation.error?.message ?? rejet.error?.message}
            </p>
          ) : null}
          <div className="flex justify-end gap-2">
            <Button variant="dangerLeger" onClick={() => setMotif('')}>
              Rejeter (motif requis)
            </Button>
            <Button
              variant="prim"
              disabled={approbation.isPending}
              onClick={() =>
                approbation.mutate(
                  {
                    id: demande.id,
                    priority: (demande.isPersonTrapped ? 'PERSON_TRAPPED' : priorite) as never,
                    assigneeIds: assigne ? [assigne] : undefined,
                  },
                  { onSuccess: (ot) => navigate(`/ot/${ot.id}`) },
                )
              }
            >
              Approuver → créer l'OT
            </Button>
          </div>
          <p style={{ fontSize: 12, color: 'var(--encre-3)' }}>
            L'OT reprend équipement et description — la demande suit ensuite l'OT
            (Reçu → Intervention → Résolu côté demandeur).
          </p>
        </>
      ) : null}
      <Modale titre="Rejeter la demande" ouverte={motif !== null} surFermeture={() => setMotif(null)}>
        <form
          onSubmit={(e: FormEvent) => {
            e.preventDefault();
            rejet.mutate({ id: demande.id, reason: motif ?? '' }, { onSuccess: () => setMotif(null) });
          }}
          className="flex flex-col gap-3"
        >
          <div className="champ">
            <label htmlFor="rej-motif">Motif (lisible par le demandeur, sans jargon) *</label>
            <input
              id="rej-motif"
              required
              minLength={3}
              value={motif ?? ''}
              onChange={(e) => setMotif(e.target.value)}
              placeholder="Ex. : fausse alerte confirmée sur place"
            />
          </div>
          {rejet.isError ? <p className="erreur-form">{rejet.error.message}</p> : null}
          <div className="pied">
            <Button onClick={() => setMotif(null)}>Annuler</Button>
            <Button type="submit" variant="dangerLeger" disabled={rejet.isPending}>
              Rejeter la demande
            </Button>
          </div>
        </form>
      </Modale>
    </div>
  );
}

/** Signalement interne (le portail public QR arrive en R2.4). */
function ModaleSignalement({
  ouverte,
  surFermeture,
}: {
  ouverte: boolean;
  surFermeture: (o: boolean) => void;
}) {
  const { data: options } = useAssetOptions();
  const creation = useCreateRequest();
  const [personneBloquee, setPersonneBloquee] = useState(false);

  const surEnvoi = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const donnees = new FormData(e.currentTarget);
    creation.mutate(
      {
        assetId: String(donnees.get('assetId')),
        description: String(donnees.get('description')),
        isPersonTrapped: personneBloquee,
      },
      {
        onSuccess: () => {
          surFermeture(false);
          setPersonneBloquee(false);
        },
      },
    );
  };

  return (
    <Modale titre="Signaler un problème" ouverte={ouverte} surFermeture={surFermeture}>
      <form onSubmit={surEnvoi} className="flex flex-col gap-3">
        <div className="champ">
          <label htmlFor="sig-asset">Équipement *</label>
          <select id="sig-asset" name="assetId" required defaultValue="">
            <option value="" disabled>Choisir…</option>
            {(options ?? []).map((a) => (
              <option key={a.id} value={a.id}>{a.reference} — {a.siteName}</option>
            ))}
          </select>
        </div>
        <div className="gros-toggle">
          <b>Une personne est-elle bloquée ?</b>
          <button
            type="button"
            className="interrupteur"
            role="switch"
            aria-checked={personneBloquee}
            aria-label="Personne bloquée"
            onClick={() => setPersonneBloquee((v) => !v)}
          />
        </div>
        <div className="champ">
          <label htmlFor="sig-desc">Décrivez le problème *</label>
          <input
            id="sig-desc"
            name="description"
            required
            placeholder="Ex. : la porte ne se ferme plus au 3ᵉ étage"
          />
        </div>
        {creation.isError ? <p className="erreur-form">{creation.error.message}</p> : null}
        <div className="pied">
          <Button onClick={() => surFermeture(false)}>Annuler</Button>
          <Button type="submit" variant="prim" disabled={creation.isPending}>
            Envoyer le signalement
          </Button>
        </div>
      </form>
    </Modale>
  );
}
