const { Card, Button, Icon, Tabs, Badge, PriorityBadge, StatusPill, SectorTag, DeadlineIndicator, Select } = window.ACRFlowDesignSystem_ba1e9c;

const WEEK = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"];

const MESES = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
const parseBR = (s) => { if (!s) return null; const [d, m, y] = String(s).split("/").map(Number); return d && m && y ? new Date(y, m - 1, d) : null; };

function CalendarScreen({ onOpenDemand }) {
  const [view, setView] = React.useState("mes");
  const [setor, setSetor] = React.useState("Todos os setores");
  const hoje = new Date();
  const [ref, setRef] = React.useState(new Date(hoje.getFullYear(), hoje.getMonth(), 1));
  const D = window.ACRData;

  const setores = ["Todos os setores"].concat((D.sectorsCfg || []).map((s) => s.name));
  const nomeSetor = (id) => { const s = (D.sectorsCfg || []).find((x) => x.id === id); return s ? s.name : ""; };

  // eventos do mês exibido, derivados das demandas reais
  const events = {};
  let atrasadosMes = 0;
  (D.demands || []).forEach((d) => {
    if (setor !== "Todos os setores" && nomeSetor(d.sector) !== setor) return;
    const dt = parseBR(d.due);
    if (!dt || dt.getMonth() !== ref.getMonth() || dt.getFullYear() !== ref.getFullYear()) return;
    const late = d.status !== "encerrada" && typeof d.daysLeft === "number" && d.daysLeft < 0;
    if (late) atrasadosMes += 1;
    const recur = !!d.recurrence && d.recurrence !== "nao";
    const tone = d.status === "encerrada" ? "neutral" : late ? "danger" : d.daysLeft <= 1 ? "warning" : recur ? "flow" : "info";
    (events[dt.getDate()] = events[dt.getDate()] || []).push({ id: d.id, t: d.title, tone, late, recur });
  });
  const totalMes = Object.values(events).reduce((a, v) => a + v.length, 0);

  const primeiro = new Date(ref.getFullYear(), ref.getMonth(), 1);
  const diasNoMes = new Date(ref.getFullYear(), ref.getMonth() + 1, 0).getDate();
  const offset = (primeiro.getDay() + 6) % 7; // semana começa na segunda
  const diasMesAnterior = new Date(ref.getFullYear(), ref.getMonth(), 0).getDate();
  const total = Math.ceil((offset + diasNoMes) / 7) * 7;
  const days = Array.from({ length: total }, (_, i) => {
    const n = i - offset + 1;
    const out = n < 1 || n > diasNoMes;
    return { key: i, n: n < 1 ? diasMesAnterior + n : n > diasNoMes ? n - diasNoMes : n, out };
  });
  const mesAnterior = MESES[(ref.getMonth() + 11) % 12];
  const mesSeguinte = MESES[(ref.getMonth() + 1) % 12];
  const irPara = (delta) => setRef(new Date(ref.getFullYear(), ref.getMonth() + delta, 1));

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Calendário</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Prazos, atividades e demandas recorrentes</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Tabs variant="pill" tabs={[{ id: "dia", label: "Dia" }, { id: "semana", label: "Semana" }, { id: "mes", label: "Mês" }]} value={view} onChange={setView} />
          <Select size="sm" options={setores} value={setor} onChange={(e) => setSetor(e.target.value)} style={{ width: 200 }} />
        </div>
      </div>

      <Card padding="0" title={MESES[ref.getMonth()] + " " + ref.getFullYear()}
        subtitle={totalMes === 0 ? "Nenhum prazo neste mês" : totalMes + " prazo" + (totalMes === 1 ? "" : "s") + " no mês" + (atrasadosMes ? " · " + atrasadosMes + " atrasado" + (atrasadosMes === 1 ? "" : "s") : "")}
        actions={<div style={{ display: "flex", gap: 6 }}><Button variant="ghost" size="sm" iconLeft={<Icon name="chevron-left" size={15} />} onClick={() => irPara(-1)}>{mesAnterior}</Button><Button variant="secondary" size="sm" onClick={() => setRef(new Date(hoje.getFullYear(), hoje.getMonth(), 1))}>Hoje</Button><Button variant="ghost" size="sm" iconRight={<Icon name="chevron-right" size={15} />} onClick={() => irPara(1)}>{mesSeguinte}</Button></div>}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", borderTop: "1px solid var(--border-subtle)" }}>
          {WEEK.map((w) => (
            <div key={w} style={{ padding: "9px 10px", font: "var(--type-overline)", color: "var(--text-muted)", letterSpacing: "var(--tracking-caps)", background: "var(--surface-sunken)", borderBottom: "1px solid var(--border-subtle)", borderRight: "1px solid var(--border-subtle)" }}>{w}</div>
          ))}
          {days.map((d) => {
            const evs = d.out ? [] : events[d.n] || [];
            const today = !d.out && d.n === hoje.getDate() && ref.getMonth() === hoje.getMonth() && ref.getFullYear() === hoje.getFullYear();
            return (
              <div key={d.key} style={{ minHeight: 96, padding: 8, display: "flex", flexDirection: "column", gap: 5, borderBottom: "1px solid var(--border-subtle)", borderRight: "1px solid var(--border-subtle)", background: d.out ? "var(--surface-sunken)" : "var(--surface-card)", opacity: d.out ? 0.6 : 1 }}>
                <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: today ? "#fff" : "var(--text-muted)", alignSelf: "flex-start", padding: today ? "1px 6px" : 0, borderRadius: "var(--radius-pill)", background: today ? "var(--accent-primary)" : "transparent" }}>{d.n}</span>
                {evs.map((e) => (
                  <button key={e.id} type="button" onClick={() => onOpenDemand(e.id)}
                    style={{ display: "flex", alignItems: "center", gap: 5, padding: "4px 6px", textAlign: "left", cursor: "pointer", borderRadius: "var(--radius-xs)", border: "1px solid " + (e.tone === "neutral" ? "var(--border-subtle)" : "var(--" + e.tone + "-border, var(--border-subtle))"), background: e.tone === "flow" ? "var(--accent-flow-soft)" : e.tone === "neutral" ? "var(--surface-muted)" : "var(--" + e.tone + "-bg)", color: e.tone === "flow" ? "var(--accent-flow)" : e.tone === "neutral" ? "var(--text-muted)" : "var(--" + e.tone + "-fg)", font: "var(--type-overline)", lineHeight: 1.25 }}>
                    <Icon name={e.recur ? "repeat" : e.late ? "alert-octagon" : "clock"} size={11} />
                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{e.t}</span>
                  </button>
                ))}
              </div>
            );
          })}
        </div>
      </Card>

      <Card title="Próximos prazos" padding="0">
        {D.demands.filter((d) => d.status !== "encerrada").length === 0
          ? <div style={{ padding: "18px 16px", font: "var(--type-body)", color: "var(--text-muted)" }}>Nenhum prazo em aberto.</div> : null}
        {D.demands.filter((d) => d.status !== "encerrada").slice(0, 6).map((d) => (
          <button key={d.id} type="button" onClick={() => onOpenDemand(d.id)} style={{ display: "flex", alignItems: "center", gap: 12, width: "100%", padding: "12px 16px", background: "transparent", border: "none", borderBottom: "1px solid var(--border-subtle)", cursor: "pointer", textAlign: "left" }}>
            <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)", width: 150 }}>{d.id}</span>
            <span style={{ flex: 1, font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{d.title}</span>
            <SectorTag sector={d.sector} size="sm" />
            <PriorityBadge priority={d.priority} size="sm" />
            <DeadlineIndicator daysLeft={d.daysLeft} date={d.due} />
          </button>
        ))}
      </Card>
    </div>
  );
}

Object.assign(window, { CalendarScreen });