/* Gaby · Dashboard — cockpit, KPIs, gráfico de pipeline + insights. */

const { arrowUp, arrowRight, dash } = window.GabyIcons;

function Cockpit({ face, ring }) {
  const D = window.GABY_DATA;
  const Portrait = window.GabyPortrait;
  return (
    <div className="cy-glass cy-cockpit">
      <Portrait size={104} face={face} ring={ring} />
      <div className="cy-cockpit__text">
        <div className="cy-cockpit__eyebrow">
          <span className="cy-eyebrow">GABY · {D.fecha.dia} · {D.fecha.hora}</span>
          <span className="cy-insight__dot" style={{ margin: 0, width: 6, height: 6 }} />
        </div>
        <p className="cy-serif cy-cockpit__greet">
          Buenas, {D.user.nombre}. Esta semana <em>cerré 3 propuestas</em> y dejé <em>2 esperándote</em>.
        </p>
      </div>
    </div>
  );
}

function Kpi({ k }) {
  const deltaCls = k.tone === "orange" ? "cy-kpi__delta--orange" : "cy-kpi__delta--up";
  const Arrow = k.dir === "up" ? arrowUp : dash;
  // value puede traer un "small" inline (de N meta)
  return (
    <div className={"cy-soft cy-kpi cy-kpi--" + k.tone}>
      <span className="cy-kpi__line" />
      <div className="cy-kpi__label">{k.label}</div>
      <div className="cy-kpi__value">
        {k.value}
        {k.id === "meta" && <small>%</small>}
      </div>
      <div className="cy-kpi__unit">{k.unit}</div>
      <div className={"cy-kpi__delta " + deltaCls}>
        <Arrow /> <span>{k.delta}</span>
      </div>
    </div>
  );
}

function Chart() {
  const { chart } = window.GABY_DATA;
  const s = chart.series;
  const W = 640, H = 200, padX = 8, padY = 24;
  const max = Math.max(...s) * 1.12, min = Math.min(...s) * 0.82;
  const x = (i) => padX + (i / (s.length - 1)) * (W - padX * 2);
  const y = (v) => padY + (1 - (v - min) / (max - min)) * (H - padY * 2);
  const linePts = s.map((v, i) => `${x(i)},${y(v)}`);
  const linePath = "M" + linePts.join(" L");
  const areaPath = `M${x(0)},${H - padY} L` + linePts.join(" L") + ` L${x(s.length - 1)},${H - padY} Z`;
  const last = s.length - 1;
  return (
    <div className="cy-glass cy-chart">
      <div className="cy-chart__head">
        <div>
          <div className="cy-eyebrow" style={{ marginBottom: 8 }}>{chart.eyebrow}</div>
          <div className="cy-chart__title">{chart.titulo}</div>
        </div>
        <div className="cy-mono" style={{ fontSize: 11, color: "var(--cy-petrol)" }}>$48,2M</div>
      </div>
      <svg className="cy-chart__svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="cyArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(74,155,147,0.34)" />
            <stop offset="100%" stopColor="rgba(74,155,147,0)" />
          </linearGradient>
          <linearGradient id="cyLine" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--cy-petrol)" />
            <stop offset="78%" stopColor="var(--cy-petrol)" />
            <stop offset="100%" stopColor="var(--cy-orange)" />
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((g) => (
          <line key={g} x1={padX} x2={W - padX} y1={padY + g * (H - padY * 2)} y2={padY + g * (H - padY * 2)}
            stroke="var(--cy-border)" strokeWidth="1" />
        ))}
        <path d={areaPath} fill="url(#cyArea)" />
        <path d={linePath} fill="none" stroke="url(#cyLine)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
        {s.map((v, i) => (
          <circle key={i} cx={x(i)} cy={y(v)} r={i === last ? 5 : 2.6}
            fill={i === last ? "var(--cy-orange)" : "var(--cy-petrol)"}
            stroke={i === last ? "rgba(240,136,60,0.3)" : "none"} strokeWidth={i === last ? 5 : 0} />
        ))}
      </svg>
      <div className="cy-chart__nota cy-serif">{chart.nota}</div>
    </div>
  );
}

function Insights({ onOpen }) {
  const { insights } = window.GABY_DATA;
  const { Button } = window.DSOperaria_e5c952;
  return (
    <div className="cy-glass cy-insights">
      <div className="cy-eyebrow">ESTO VALE LA PENA MIRAR HOY</div>
      {insights.map((it) => (
        <div key={it.id} className={"cy-insight" + (it.urgent ? " cy-insight--urgent" : "")}>
          <span className="cy-insight__dot" />
          <p className="cy-insight__text">{it.texto}</p>
        </div>
      ))}
      <Button variant="ghost" className="cy-ghost" style={{ marginTop: 6, alignSelf: "flex-start" }}
        onClick={onOpen}>
        Hablar con Gaby <span style={{ display: "inline-flex" }}>{arrowRight({})}</span>
      </Button>
    </div>
  );
}

function Dashboard({ face, ring, kpiStyle, onOpenGaby }) {
  const { kpis } = window.GABY_DATA;
  return (
    <>
      <Cockpit face={face} ring={ring} />
      <div className="cy-kpis" data-kpi={kpiStyle}>
        {kpis.map((k) => <Kpi key={k.id} k={k} />)}
      </div>
      <div className="cy-split">
        <Chart />
        <Insights onOpen={onOpenGaby} />
      </div>
    </>
  );
}
window.GabyDashboard = Dashboard;