const { StatCard, Card, Icon, Button, DemandCard, ProgressBar, Badge, Avatar, DataTable, StatusPill, PriorityBadge, SectorTag, DeadlineIndicator, EmptyState } = window.ACRFlowDesignSystem_ba1e9c;

function SectionTitle({ children, action }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: 4 }}>
      <h3 style={{ font: "var(--type-h3)", color: "var(--text-strong)" }}>{children}</h3>
      {action}
    </div>
  );
}

function BarChart({ data, tone = "var(--accent-primary)" }) {
  const max = Math.max(...data.map((d) => d.value));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {data.map((d) => (
        <div key={d.label} style={{ display: "grid", gridTemplateColumns: "minmax(74px,108px) 1fr 34px", alignItems: "center", gap: 8 }}>
          <span style={{ font: "var(--type-caption)", color: "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.label}</span>
          <div style={{ height: 8, borderRadius: "var(--radius-pill)", background: "var(--surface-muted)" }}>
            <div style={{ width: (d.value / max) * 100 + "%", height: "100%", borderRadius: "var(--radius-pill)", background: d.tone || tone, transition: "width var(--dur-slow) var(--ease-out)" }} />
          </div>
          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-strong)", textAlign: "right" }}>{d.value}</span>
        </div>
      ))}
    </div>
  );
}

const LAYOUT_KEY = "flowtix.dash.layout.v2";
const SPAN_OPTS = [{ value: 4, label: "1/3 da largura" }, { value: 6, label: "Metade" }, { value: 8, label: "2/3 da largura" }, { value: 12, label: "Largura total" }];
const DEFAULT_LAYOUT = [
  { id: "demandas", span: 12 },
  { id: "acao", span: 8 },
  { id: "setor", span: 4 },
  { id: "prazo", span: 4 },
  { id: "recorrentes", span: 4 },
];

function useLayout() {
  const [layout, setLayout] = React.useState(() => {
    try {
      const raw = localStorage.getItem(LAYOUT_KEY);
      if (raw) {
        const saved = JSON.parse(raw);
        if (Array.isArray(saved) && saved.length) return saved;
      }
    } catch (e) { /* ignora */ }
    return DEFAULT_LAYOUT;
  });
  const persist = (next) => { setLayout(next); try { localStorage.setItem(LAYOUT_KEY, JSON.stringify(next)); } catch (e) { /* ignora */ } };
  return [layout, persist];
}

function Panel({ item, children, onSpan, onMove, drag, setDrag, over, setOver }) {
  const NSp = window.ACRFlowDesignSystem_ba1e9c;
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onDragOver={(e) => { e.preventDefault(); setOver(item.id); }}
      onDragLeave={() => setOver((o) => (o === item.id ? null : o))}
      onDrop={(e) => { e.preventDefault(); onMove(drag, item.id); setDrag(null); setOver(null); }}
      style={{ gridColumn: "span " + item.span, display: "flex", flexDirection: "column", position: "relative", opacity: drag === item.id ? 0.45 : 1, outline: over === item.id && drag && drag !== item.id ? "2px dashed var(--border-focus)" : "none", outlineOffset: 4, borderRadius: "var(--radius-card)" }}>
      <div style={{ height: 24, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 2, opacity: hover || drag === item.id ? 1 : 0, transition: "opacity var(--dur-fast) var(--ease-out)" }}>
        <span draggable
          onDragStart={(e) => { setDrag(item.id); e.dataTransfer.effectAllowed = "move"; }}
          onDragEnd={() => { setDrag(null); setOver(null); }}
          title="Arraste para mudar de lugar"
          style={{ display: "inline-flex", padding: 3, borderRadius: "var(--radius-sm)", color: "var(--text-subtle)", cursor: "grab" }}>
          <NSp.Icon name="grip-vertical" size={15} />
        </span>
        <NSp.DropdownMenu align="right"
          trigger={<NSp.IconButton size="sm" variant="ghost" label="Ajustar tamanho" icon={<NSp.Icon name="move-horizontal" size={15} />} />}
          items={SPAN_OPTS.map((o) => ({ label: o.label, icon: <NSp.Icon name={item.span === o.value ? "check" : "square"} size={15} />, onSelect: () => onSpan(item.id, o.value) }))} />
      </div>
      {children}
    </div>
  );
}

function DashboardScreen({ user, onOpenDemand, onNavigate }) {
  const D = window.ACRData;
  const supervisor = user.profile === "supervisor";
  const [layout, setLayout] = useLayout();
  const [drag, setDrag] = React.useState(null);
  const [newBoard, setNewBoard] = React.useState(false);
  const addBoard = (cfg) => { setLayout([...layout, { id: "c" + Date.now(), span: cfg.span, custom: cfg }]); setNewBoard(false); };
  const setChart = (id, chart) => setLayout(layout.map((i) => (i.id === id ? { ...i, custom: { ...i.custom, chart } } : i)));
  const removeBoard = (id) => setLayout(layout.filter((i) => i.id !== id));
  const [over, setOver] = React.useState(null);
  const setSpan = (id, span) => setLayout(layout.map((i) => (i.id === id ? { ...i, span } : i)));
  const move = (fromId, toId) => {
    if (!fromId || !toId || fromId === toId) return;
    const next = [...layout];
    const fi = next.findIndex((i) => i.id === fromId);
    const ti = next.findIndex((i) => i.id === toId);
    if (fi < 0 || ti < 0) return;
    next.splice(ti, 0, next.splice(fi, 1)[0]);
    setLayout(next);
  };
  const mine = D.demands.filter((d) => d.status !== "encerrada");
  const rows = mine.slice(0, 5);
  const count = (s) => D.demands.filter((d) => d.status === s).length;
  const abertas = mine.length;
  const atrasadas = mine.filter((d) => d.daysLeft < 0).length;
  const hoje = mine.filter((d) => d.daysLeft === 0).length;
  const amanha = mine.filter((d) => d.daysLeft === 1).length;
  const emAndamento = count("andamento");
  const aprovacao = count("aguardando_aprovacao");
  const encerradas = count("encerrada");
  const encerradasAll = D.demands.filter((d) => d.status === "encerrada");
  const noPrazo = encerradasAll.filter((d) => (d.daysLeft ?? 0) >= 0).length;
  const foraPrazo = encerradasAll.length - noPrazo;
  const pctPrazo = encerradasAll.length ? Math.round((noPrazo / encerradasAll.length) * 100) : 0;
  const pendentesAprovacao = D.demands.filter((d) => d.status === "aguardando_aprovacao");
  const recorrentes = D.demands.filter((d) => d.recurrence && d.recurrence !== "nao");
  const checklistHoje = (D.checklist || []).filter((c) => !c.done).slice(0, 3);
  const porSetor = D.sectorsCfg.map((s) => ({ label: s.name, value: D.demands.filter((d) => d.sector === s.id).length, tone: "var(--setor-" + (s.id === "gestao-condominial" ? "condominial" : s.id === "departamento-pessoal" ? "pessoal" : "contabilidade") + ")" }));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>{(new Date().getHours() < 12 ? "Bom dia, " : new Date().getHours() < 18 ? "Boa tarde, " : "Boa noite, ") + user.name.split(" ")[0]}</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>
            {supervisor
              ? (abertas === 0 && aprovacao === 0
                  ? "Nenhuma demanda em aberto no momento."
                  : "Sua equipe tem " + abertas + " demanda" + (abertas === 1 ? "" : "s") + " em aberto e " + aprovacao + " aguardando sua aprovação.")
              : (abertas === 0
                  ? "Você não tem demandas pendentes."
                  : "Você possui " + abertas + " demanda" + (abertas === 1 ? "" : "s") + " pendente" + (abertas === 1 ? "" : "s") + " — " + atrasadas + " atrasada" + (atrasadas === 1 ? "" : "s") + " e " + hoje + " vence hoje.")}
          </span>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          {JSON.stringify(layout) !== JSON.stringify(DEFAULT_LAYOUT) ? <Button variant="ghost" iconLeft={<Icon name="rotate-ccw" size={15} />} onClick={() => setLayout(DEFAULT_LAYOUT)}>Restaurar padrão</Button> : null}
          <Button variant="primary" iconLeft={<Icon name="layout-grid" size={16} />} onClick={() => setNewBoard(true)}>Novo quadro</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(180px,1fr))", gap: "var(--gap-grid)" }}>
        <StatCard label="Atrasadas" value={atrasadas} tone="danger" icon={<Icon name="alert-octagon" size={16} />} hint="Ação imediata" onClick={() => onNavigate("fila")} />
        <StatCard label="Vencendo hoje" value={hoje} tone="warning" icon={<Icon name="alarm-clock" size={16} />} onClick={() => onNavigate("fila")} />
        <StatCard label="Vencendo amanhã" value={amanha} tone="warning" icon={<Icon name="clock" size={16} />} onClick={() => onNavigate("fila")} />
        <StatCard label="Em andamento" value={emAndamento} tone="flow" icon={<Icon name="activity" size={16} />} />
        {supervisor
          ? <StatCard label="Aguardando aprovação" value={aprovacao} tone="brand" icon={<Icon name="shield-question" size={16} />} hint="Somente você aprova" onClick={() => pendentesAprovacao[0] ? onOpenDemand(pendentesAprovacao[0].id) : onNavigate("demandas")} />
          : <StatCard label="Encerradas" value={encerradas} tone="success" icon={<Icon name="check-circle-2" size={16} />} />}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(12,minmax(0,1fr))", gap: "var(--gap-grid)", alignItems: "start" }}>
        {layout.map((item) => (
          <Panel key={item.id} item={item} onSpan={setSpan} onMove={move} drag={drag} setDrag={setDrag} over={over} setOver={setOver}>
            {item.custom ? (
              <window.CustomBoard config={{ ...item.custom, id: item.id }} demands={D.demands} statuses={D.statuses} sectors={D.sectorsCfg}
                onNavigate={onNavigate} onOpenDemand={onOpenDemand} onChart={setChart} onRemove={removeBoard} />
            ) : null}
            {item.id === "demandas" ? (
              <Card title={supervisor ? "Demandas da equipe" : "Minhas demandas"} subtitle="Ordenadas por urgência de prazo" actions={<Button variant="ghost" size="sm" onClick={() => onNavigate("demandas")}>Ver todas</Button>} padding="0">
            <DataTable
              columns={[
                { key: "id", label: "Nº", width: 118, render: (r) => <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", whiteSpace: "nowrap" }}>{r.id}</span> },
                { key: "title", label: "Demanda", render: (r) => (
                  <div style={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}>
                    <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)", display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</span>
                    <SectorTag sector={r.sector} size="sm" />
                  </div>) },
                { key: "status", label: "Status", width: 150, render: (r) => <StatusPill status={r.status} size="sm" /> },
                { key: "priority", label: "Prioridade", width: 92, render: (r) => <PriorityBadge priority={r.priority} size="sm" /> },
                { key: "daysLeft", label: "Prazo", width: 128, render: (r) => <DeadlineIndicator daysLeft={r.daysLeft} style={{ padding: "2px 8px", font: "var(--type-overline)" }} /> },
                { key: "progress", label: "Conclusão", width: 100, render: (r) => <ProgressBar value={r.progress} size="sm" countLabel={r.progress + "%"} /> },
              ]}
              rows={rows} onRowClick={(r) => onOpenDemand(r.id)} dense />
          </Card>
            ) : null}
            {item.id === "acao" ? (supervisor ? (
            <Card title="Aguardando sua aprovação" subtitle="Somente o Supervisor pode aprovar o encerramento" accent="var(--violet-500)">
              {pendentesAprovacao.length === 0
                ? <div style={{ padding: "14px 2px", font: "var(--type-body)", color: "var(--text-muted)" }}>Nenhuma demanda aguardando aprovação.</div>
                : pendentesAprovacao.map((d) => (
                  <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap", padding: "10px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                    <div style={{ flex: 1, minWidth: 260, display: "flex", flexDirection: "column", gap: 6 }}>
                      <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{d.id}</span>
                      <span style={{ font: "var(--type-h4)", color: "var(--text-strong)" }}>{d.title}</span>
                      <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{(d.people && d.people[0] ? d.people[0].name + " solicitou o encerramento" : "Encerramento solicitado") + " · checklist " + d.progress + "%"}</span>
                    </div>
                    <div style={{ display: "flex", gap: 8 }}>
                      <Button variant="secondary" onClick={() => onOpenDemand(d.id)}>Revisar</Button>
                      <Button variant="success" iconLeft={<Icon name="shield-check" size={16} />} onClick={() => onOpenDemand(d.id)}>Aprovar</Button>
                    </div>
                  </div>
                ))}
            </Card>
          ) : (
            <Card title="Checklist do dia" subtitle="Etapas com prazo até hoje">
              {checklistHoje.length === 0 ? <div style={{ padding: "14px 2px", font: "var(--type-body)", color: "var(--text-muted)" }}>Nenhuma etapa com prazo para hoje.</div> : null}
              {checklistHoje.map((c) => (
                <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                  <Icon name={c.done ? "check-circle-2" : "circle"} size={16} style={{ color: c.done ? "var(--success-fg)" : "var(--text-subtle)" }} />
                  <span style={{ flex: 1, font: "var(--type-body)", color: c.done ? "var(--text-muted)" : "var(--text-strong)", textDecoration: c.done ? "line-through" : "none" }}>{c.text}</span>
                  <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>{c.demandId || ""}</span>
                </div>
              ))}
            </Card>
          )) : null}
            {item.id === "setor" ? (
              <Card title="Demandas por setor" subtitle="Todo o histórico">
            <BarChart data={porSetor} />
          </Card>
            ) : null}
            {item.id === "prazo" ? (
              <Card title="Atendimento no prazo" subtitle="Últimos 30 dias">
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <div style={{ position: "relative", width: 96, height: 96, borderRadius: "50%", background: "conic-gradient(var(--success-solid) 0 " + pctPrazo + "%, var(--danger-solid) " + pctPrazo + "% 100%)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 68, height: 68, borderRadius: "50%", background: "var(--surface-card)", display: "flex", alignItems: "center", justifyContent: "center", font: "var(--type-h3)", color: "var(--text-strong)" }}>{pctPrazo + "%"}</div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <span style={{ display: "flex", alignItems: "center", gap: 7, font: "var(--type-caption)", color: "var(--text-body)" }}><span style={{ width: 9, height: 9, borderRadius: 3, background: "var(--success-solid)" }} />{"Dentro do prazo · " + noPrazo}</span>
                <span style={{ display: "flex", alignItems: "center", gap: 7, font: "var(--type-caption)", color: "var(--text-body)" }}><span style={{ width: 9, height: 9, borderRadius: 3, background: "var(--danger-solid)" }} />{"Fora do prazo · " + foraPrazo}</span>
                <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>{encerradasAll.length ? encerradasAll.length + " demanda" + (encerradasAll.length === 1 ? "" : "s") + " encerrada" + (encerradasAll.length === 1 ? "" : "s") : "Sem demandas encerradas ainda"}</span>
              </div>
            </div>
          </Card>
            ) : null}
            {item.id === "recorrentes" ? (
              <Card title="Recorrentes desta semana" padding="var(--pad-card-compact)">
            {recorrentes.length === 0
              ? <div style={{ padding: "12px 6px", font: "var(--type-body)", color: "var(--text-muted)" }}>Nenhuma demanda recorrente configurada.</div>
              : recorrentes.map((d) => (
                <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 6px", cursor: "pointer" }} onClick={() => onOpenDemand(d.id)}>
                  <Icon name="repeat" size={16} style={{ color: "var(--accent-flow)" }} />
                  <span style={{ flex: 1, display: "flex", flexDirection: "column" }}>
                    <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{d.title}</span>
                    <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{d.recurrenceLabel || "Recorrente"}</span>
                  </span>
                </div>
              ))}
          </Card>
            ) : null}
          </Panel>
        ))}
      </div>
      {newBoard ? <window.NewBoardModal sectors={D.sectorsCfg} onClose={() => setNewBoard(false)} onCreate={addBoard} /> : null}
    </div>
  );
}

Object.assign(window, { DashboardScreen, BarChart, SectionTitle });