// Panneau « Réponses aux questions ciblées » + graphiques d'évolution des appels
// pour la page d'accueil.

const { useState: useStateVig, useEffect: useEffectVig } = React;

function VigilancePanel({ openProfile, compact = false, locked = false, onUnlockRequest, withChart = false }) {
  const items = React.useMemo(() =>
    window.RESIDENTS.filter((r) => r.directiveResponses && r.directiveResponses.length > 0).map((r) => ({ resident: r })), [window.LIVANA_DATA_VERSION]);
  const [expanded, setExpanded] = useStateVig(false);
  const [dismissed, setDismissed] = useStateVig([]);
  const rowRef = React.useRef(null);
  const scrollRow = (dir) => { if (rowRef.current) rowRef.current.scrollBy({ left: dir * 360, behavior: 'smooth' }); };
  const [openCards, setOpenCards] = useStateVig({});
  const toggleCard = (id) => setOpenCards((o) => ({ ...o, [id]: !o[id] }));
  const [vigTab, setVigTab] = useStateVig('reponses');
  const [currentIdx, setCurrentIdx] = useStateVig(0);
  const [selId, setSelId] = useStateVig(null);
  const [embedExpanded, setEmbedExpanded] = useStateVig(false);
  const visible = items.filter((it) => !dismissed.includes(it.resident.id));
  const COLLAPSED = 2;
  const shown = expanded ? visible : visible.slice(0, COLLAPSED);

  if (!items.length) {
    return (
      <div className="card vig-panel">
        <div className="vig-head">
          <span className="vig-orb-ic"><Icon name="person-speak" size={18} /></span>
          <div>
            <div className="vig-title">Réponses aux questions ciblées</div>
            <div className="vig-sub">Recueillies par Livana</div>
          </div>
        </div>
        <div className="vig-empty"><Icon name="check" size={16} /> Aucune réponse recueillie pour l'instant.</div>
      </div>
    );
  }

  const content = (
    <React.Fragment>
    <div className={`card vig-panel ${compact ? 'vig-compact' : ''} ${locked ? 'vig-locked' : ''}`}>
      {locked &&
        <div className="vig-gate">
          <div className="vig-gate-ic"><Icon name="lock" size={24} /></div>
          <div className="vig-gate-title">Réponses protégées</div>
          <div className="vig-gate-sub">Ces données relèvent du secret médical. Saisissez votre code à 4&nbsp;chiffres pour les afficher.</div>
          <button className="btn btn-accent" onClick={onUnlockRequest}><Icon name="lock" size={15} /> Déverrouiller</button>
        </div>
      }
      <div className="vig-head">
        <span className="vig-orb-ic"><Icon name="person-speak" size={18} /></span>
        <div>
          <div className="vig-title">Réponses aux questions ciblées <span className="vig-count">{visible.length}</span></div>
          <div className="vig-sub">Recueillies par Livana lors des derniers appels</div>
        </div>
      </div>

      {visible.length === 0 ? (
        <div className="vig-empty"><Icon name="check" size={16} /> Toutes les réponses ont été consultées.</div>
      ) : (() => {
        const active = (visible.find((it) => it.resident.id === selId) || visible[0]).resident;
        return (
        <div className="resp2 resp2-embed">
          <aside className="resp2-list">
            {visible.map((it) => {
              const r = it.resident;
              return (
                <button key={r.id} className={`resp2-item ${r.id === active.id ? 'active' : ''}`} onClick={() => { setSelId(r.id); setEmbedExpanded(false); }}>
                  <Avatar first={r.firstName} last={r.lastName} mood={r.moodTimeline.slice(-1)[0]?.mood} size={36} />
                  <span className="resp2-item-id">
                    <span className="resp2-item-name">{r.firstName} {r.lastName}</span>
                    <span className="resp2-item-room">Chambre {r.room}</span>
                  </span>
                  <span className="resp2-item-count">{r.directiveResponses.length}</span>
                </button>
              );
            })}
          </aside>

          <section className="resp2-detail card panel">
            <div className="resp2-detail-head">
              <Avatar first={active.firstName} last={active.lastName} mood={active.moodTimeline.slice(-1)[0]?.mood} size={46} />
              <div className="resp2-detail-id">
                <div className="resp2-detail-name">{active.firstName} {active.lastName}</div>
                <div className="resp2-detail-meta">{active.age} ans · Chambre {active.room} · {active.directiveResponses.length} réponse{active.directiveResponses.length > 1 ? 's' : ''}</div>
              </div>
              <div className="resp2-detail-actions">
                <button className="btn btn-soft btn-sm" onClick={() => openProfile(active, null, 'directives')}>Voir le dossier</button>
                <button className="btn btn-accent btn-sm" onClick={() => openProfile(active, `[PREFILL]Peux-tu approfondir les sujets recueillis par Livana auprès de ${active.firstName} ${active.lastName} (par ex. « ${active.directiveResponses[0].q} ») et m'aider à mieux comprendre sa situation ?`, 'chat')}><Icon name="sparkles" size={18} /> Questionner tous les sujets</button>
              </div>
            </div>
            <div className="resp2-qa-list">
              {(embedExpanded ? active.directiveResponses : active.directiveResponses.slice(0, 2)).map((qa, i) => (
                <div key={i} className="resp2-qa">
                  <div className="resp2-qa-q">{qa.q}</div>
                  <div className="resp2-qa-a">{qa.a}</div>
                  {qa.when && <div className="resp2-qa-when"><Icon name="phone" size={11} /> Recueillie · {qa.when}</div>}
                </div>
              ))}
              {active.directiveResponses.length > 2 && (
                <button className="resp2-more" onClick={() => setEmbedExpanded((v) => !v)}>
                  {embedExpanded ? 'Afficher moins' : `Afficher plus (${active.directiveResponses.length - 2})`}
                  <Icon name={embedExpanded ? 'chevron-left' : 'chevron-right'} size={14} style={{ transform: 'rotate(90deg)' }} />
                </button>
              )}
            </div>
            <div className="resp2-detail-foot">
              <button className="btn btn-ghost btn-sm" onClick={() => { setDismissed((d) => [...d, active.id]); setSelId(null); setEmbedExpanded(false); }}><Icon name="check" size={14} /> J'ai tout vu</button>
            </div>
          </section>
        </div>
        );
      })()}
    </div>
    {withChart && (
    <div className="card vig-panel">
      <div className="vig-head">
        <span className="vig-orb"></span>
        <div>
          <div className="vig-title">Évolution des appels · 7 derniers jours</div>
          <div className="vig-sub">118 appels au total · <span className="trend up">↑ +18%</span></div>
        </div>
      </div>
      <CallsTrendChart />
    </div>
    )}
    </React.Fragment>
  );
  return withChart ? <div className="vig-row">{content}</div> : content;
}

function CallsTrendChart() {
  const days = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
  const data = [12, 18, 14, 22, 19, 9, 24];
  const max = Math.max(...data);
  const W = 360, H = 160, padL = 20, padR = 12, padT = 18, padB = 26;
  const innerW = W - padL - padR, innerH = H - padT - padB;
  const X = (i) => padL + (i + 0.5) * (innerW / data.length);
  const Y = (v) => padT + innerH - (v / max) * innerH;
  const linePath = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${X(i)} ${Y(v)}`).join(' ');
  const areaPath = `${linePath} L ${X(data.length - 1)} ${padT + innerH} L ${X(0)} ${padT + innerH} Z`;
  const total = data.reduce((s, v) => s + v, 0);
  return (
    <div className="vig-chart">
      <svg className="chart-svg" viewBox={`0 0 ${W} ${H}`}>
        <line x1={padL} x2={W - padR} y1={padT + innerH * 0.5} y2={padT + innerH * 0.5} stroke="var(--border)" strokeDasharray="2 5" opacity="0.6" />
        <path d={linePath} fill="none" stroke="var(--accent)" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
        {data.map((v, i) => (
          <g key={i}>
            <circle cx={X(i)} cy={Y(v)} r="2.5" fill="var(--accent)" />
            <text x={X(i)} y={Y(v) - 7} textAnchor="middle" fontSize="10" fill="var(--text-2)" fontWeight="600">{v}</text>
            <text x={X(i)} y={H - 6} textAnchor="middle" fontSize="10" fill="var(--text-3)">{days[i]}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

window.VigilancePanel = VigilancePanel;
window.CallsTrendChart = CallsTrendChart;

// Section « Évolution des appels » pour la page d'accueil — période sélectionnable.
// Comptage des appels de TOUS les résidents de l'établissement connecté
// (dates issues des notifications Firebase).

// Regroupe les dates d'appels en tranches par période
function computeCallPeriods() {
  const dates = [];
  (window.RESIDENTS || []).forEach((r) => (r.calls || []).forEach((c) => {
    if (c.date instanceof Date && !isNaN(c.date)) dates.push(c.date);
  }));

  const JOURS = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];
  const MOIS = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'];
  const debutJour = (d) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; };
  const aujourdhui = debutJour(new Date());

  // Derniers jours (le plus ancien à gauche, aujourd'hui à droite)
  const parJours = (n) => {
    const labels = [], data = [];
    for (let i = n - 1; i >= 0; i--) {
      const j = new Date(aujourdhui); j.setDate(aujourdhui.getDate() - i);
      const fin = new Date(j); fin.setDate(j.getDate() + 1);
      labels.push(JOURS[j.getDay()]);
      data.push(dates.filter((d) => d >= j && d < fin).length);
    }
    return { labels, data };
  };
  // Dernières semaines glissantes de 7 jours (S1 = la plus ancienne)
  const parSemaines = (n) => {
    const labels = [], data = [];
    for (let i = n - 1; i >= 0; i--) {
      const fin = new Date(aujourdhui); fin.setDate(aujourdhui.getDate() - i * 7 + 1);
      const debut = new Date(fin); debut.setDate(fin.getDate() - 7);
      labels.push('S' + (n - i));
      data.push(dates.filter((d) => d >= debut && d < fin).length);
    }
    return { labels, data };
  };
  // Derniers mois calendaires (mois courant inclus, à droite)
  const parMois = (n) => {
    const labels = [], data = [];
    for (let i = n - 1; i >= 0; i--) {
      const debut = new Date(aujourdhui.getFullYear(), aujourdhui.getMonth() - i, 1);
      const fin = new Date(debut.getFullYear(), debut.getMonth() + 1, 1);
      labels.push(MOIS[debut.getMonth()]);
      data.push(dates.filter((d) => d >= debut && d < fin).length);
    }
    return { labels, data };
  };

  const j7 = parJours(7), s4 = parSemaines(4), s8 = parSemaines(8), m6 = parMois(6);
  return {
    '7j': { label: '7 jours', unit: 'jour', labels: j7.labels, data: j7.data },
    '4s': { label: '4 semaines', unit: 'semaine', labels: s4.labels, data: s4.data },
    '8s': { label: '8 semaines', unit: 'semaine', labels: s8.labels, data: s8.data },
    '6m': { label: '6 mois', unit: 'mois', labels: m6.labels, data: m6.data },
  };
}

function CallsEvolutionSection() {
  // Recalculé quand de nouvelles données arrivent (temps réel)
  const PERIODS = React.useMemo(() => computeCallPeriods(), [window.LIVANA_DATA_VERSION]);
  const [period, setPeriod] = React.useState('7j');
  const { labels, data, unit } = PERIODS[period];
  const max = Math.max(Math.max(...data), 1) * 1.12;
  const W = 760, H = 240, padL = 40, padR = 20, padT = 24, padB = 34;
  const innerW = W - padL - padR, innerH = H - padT - padB;
  const stepX = innerW / data.length;
  const X = (i) => padL + (i + 0.5) * stepX;
  const Y = (v) => padT + innerH - (v / max) * innerH;
  const linePath = data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${X(i)} ${Y(v)}`).join(' ');
  const areaPath = `${linePath} L ${X(data.length - 1)} ${padT + innerH} L ${X(0)} ${padT + innerH} Z`;
  const total = data.reduce((s, v) => s + v, 0);
  const delta = data[0] > 0 ? Math.round(((data[data.length - 1] - data[0]) / data[0]) * 100) : null;
  const avg = Math.round(total / data.length);
  const yTicks = [0, 0.25, 0.5, 0.75, 1];

  return (
    <div className="card panel calls-evo">
      <div className="panel-head">
        <div>
          <h3>Évolution des appels</h3>
          <span className="calls-evo-sub">{total} appels sur la période</span>
        </div>
        <div className="calls-evo-seg">
          {Object.keys(PERIODS).map((k) => (
            <button key={k} className={period === k ? 'active' : ''} onClick={() => setPeriod(k)}>{PERIODS[k].label}</button>
          ))}
        </div>
      </div>
      <div className="calls-evo-row">
        <svg className="chart-svg calls-evo-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
          <defs>
            <linearGradient id="callsEvoArea" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.20" />
              <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
            </linearGradient>
          </defs>
          {yTicks.map((f, i) => (
            <g key={i}>
              <line x1={padL} x2={W - padR} y1={padT + innerH * (1 - f)} y2={padT + innerH * (1 - f)} stroke="var(--border)" strokeDasharray={f === 0 ? '0' : '3 5'} opacity={f === 0 ? 0.9 : 0.5} />
              <text x={padL - 8} y={padT + innerH * (1 - f) + 3} textAnchor="end" fontSize="10" fill="var(--text-3)">{Math.round(max * f)}</text>
            </g>
          ))}
          <path d={areaPath} fill="url(#callsEvoArea)" />
          <path d={linePath} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          {data.map((v, i) => (
            <g key={i}>
              <circle cx={X(i)} cy={Y(v)} r="4" fill="var(--surface)" stroke="var(--accent)" strokeWidth="2.5" />
              <text x={X(i)} y={Y(v) - 11} textAnchor="middle" fontSize="11" fill="var(--text-2)" fontWeight="600">{v}</text>
              <text x={X(i)} y={H - 10} textAnchor="middle" fontSize="11" fill="var(--text-3)">{labels[i]}</text>
            </g>
          ))}
        </svg>
        <div className="calls-evo-stats">
          <div className="calls-evo-stat"><span className="ces-val">{avg}</span><span className="ces-lbl">moy. / {unit}</span></div>
          <div className="calls-evo-stat">
            {delta == null ?
            <span className="ces-val">—</span> :
            <span className={`ces-val trend ${delta > 0 ? 'up' : delta < 0 ? 'down' : ''}`}>{delta > 0 ? `↑ +${delta}%` : delta < 0 ? `↓ ${delta}%` : '→ 0%'}</span>}
            <span className="ces-lbl">appels sur la période</span>
          </div>
          <div className="calls-evo-stat"><span className="ces-val">{Math.max(...data)}</span><span className="ces-lbl">pic d'activité</span></div>
        </div>
      </div>
    </div>
  );
}

window.CallsEvolutionSection = CallsEvolutionSection;