/* global React, Icon, Button, Badge, Card, brl, PageHead */
const { useState: useKBState } = React;

const KB_COLUMNS = [
  { id: "a-fazer",  label: "A fazer",           color: "#6BA3D6" },
  { id: "em-and",   label: "Em andamento",      color: "#D4A04A" },
  { id: "review",   label: "Em revisão",        color: "#B295C9" },
  { id: "feito",    label: "Concluído",         color: "#5BB17A" },
];

const KB_CARDS = {
  "a-fazer":  [],
  "em-and":   [],
  "review":   [],
  "feito":    [],
};

function Kanban() {
  const totalCards = Object.values(KB_CARDS).reduce((a, col) => a + col.length, 0);
  return (
    <div className="canvas">
      <PageHead title="Kanban / Tarefas" sub={totalCards > 0 ? `${totalCards} tarefa${totalCards !== 1 ? "s" : ""}` : "Nenhuma tarefa criada"}
        right={<><div style={{ display: "flex", gap: 6 }}>
          <span className="chip active">Time todo</span>
          <span className="chip">Minhas</span>
          <span className="chip">Atrasadas</span>
        </div>
        <Button variant="secondary" icon="filter" size="sm">Filtros</Button>
        <Button variant="primary" icon="plus" size="sm">Nova tarefa</Button></>}/>

      <div className="kanban">
        {KB_COLUMNS.map(col => (
          <div key={col.id} className="k-col">
            <div className="k-col-head">
              <div className="label"><span className="swatch" style={{ background: col.color }} />{col.label}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span className="count">{KB_CARDS[col.id].length}</span>
                <Icon name="plus" size={14} className="muted" />
              </div>
            </div>
            <div className="k-body">
              {KB_CARDS[col.id].length === 0 && (
                <div style={{ padding: "20px 12px", textAlign: "center", color: "var(--tm-fg-4)", fontSize: 12 }}>
                  Sem tarefas
                </div>
              )}
              {KB_CARDS[col.id].map(c => (
                <div key={c.id} className="k-card">
                  <div className="title">{c.title}</div>
                  <div className="tags">
                    {c.tags.map(t => <span key={t} className="tag">{t}</span>)}
                    <span className={`tag priority-${c.prio}`}>{c.prio === "high" ? "Alta" : c.prio === "med" ? "Média" : "Baixa"}</span>
                  </div>
                  <div className="meta">
                    <Icon name="calendar" size={12} /> <span>{c.due}</span>
                    <div className="avatar-stack" style={{ marginLeft: "auto" }}>
                      {c.assignees.map((a, i) => <div key={i} className="avatar sm" style={{ width: 22, height: 22, fontSize: 10 }}>{a}</div>)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Agenda ----------
function Agenda() {
  const now          = new Date();
  const today        = now.getDate();
  const currentMonth = now.getMonth();
  const currentYear  = now.getFullYear();

  // Day-of-week for the 1st of this month (0=Sun → convert to Mon-first index)
  const firstDow = new Date(currentYear, currentMonth, 1).getDay();
  const startWeekDay = (firstDow + 6) % 7; // 0=Mon

  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  const cells = [];
  for (let i = 0; i < 35; i++) {
    const dayNum = i - startWeekDay + 1;
    if (dayNum < 1 || dayNum > daysInMonth) cells.push({ muted: true, num: dayNum < 1 ? new Date(currentYear, currentMonth, dayNum).getDate() : dayNum - daysInMonth });
    else cells.push({ num: dayNum, today: dayNum === today });
  }

  const events = {}; // populated by real user data — empty by default

  const monthName = now.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
  const todayFmt  = now.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });

  return (
    <div className="canvas">
      <PageHead title={`Agenda — ${monthName.charAt(0).toUpperCase() + monthName.slice(1)}`}
        sub="Adicione eventos clicando em 'Novo evento'"
        right={<><div style={{ display: "flex", gap: 6 }}>
          <span className="chip">Dia</span>
          <span className="chip">Semana</span>
          <span className="chip active">Mês</span>
        </div>
        <Button variant="secondary" size="sm" icon="chevron-left"></Button>
        <Button variant="ghost" size="sm">Hoje</Button>
        <Button variant="secondary" size="sm" icon="chevron-right"></Button>
        <Button variant="primary" icon="plus" size="sm">Novo evento</Button></>}/>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16 }}>
        <div className="cal">
          {["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"].map(d => <div key={d} className="dow">{d}</div>)}
          {cells.map((c, i) => (
            <div key={i} className={`day ${c.muted ? "muted" : ""} ${c.today ? "today" : ""}`}>
              <div className="num">{String(c.num).padStart(2, "0")}</div>
              {!c.muted && (events[c.num] || []).map((e, j) => (
                <div key={j} className={`ev ${e.tone}`} title={e.t}>{e.t}</div>
              ))}
            </div>
          ))}
        </div>

        <Card title={`Hoje · ${todayFmt}`}>
          <div style={{ padding: "24px 16px", textAlign: "center", color: "var(--tm-fg-3)" }}>
            <Icon name="calendar" size={28} style={{ opacity: 0.3, marginBottom: 10 }} />
            <div style={{ fontSize: 13 }}>Nenhum evento hoje</div>
            <div style={{ fontSize: 12, marginTop: 4 }}>Clique em "Novo evento" para adicionar</div>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { Kanban, Agenda });