/* Wood OS — Dashboard (Painel Geral / Cockpit) */
const { useState: useStateD, useMemo: useMemoD } = React;

const Dashboard = ({ navigate }) => {
  const [drawer, setDrawer] = useStateD(null);
  const m = MOCK.metrics;
  const urgent = MOCK.requests.filter(r => r.urgent);
  const recent = MOCK.requests.slice(0, 6);
  const activeProjects = MOCK.projects.filter(p => p.status === "producao" || p.status === "analise" || p.status === "pronto");

  // status distribution (donut)
  const dist = useMemoD(() => {
    const counts = {};
    MOCK.requests.forEach(r => { counts[r.status] = (counts[r.status] || 0) + 1; });
    return counts;
  }, []);

  return (
    <>
      {/* Hero welcome */}
      <div className="wood-card wood-veneer relative overflow-hidden p-7 mb-6 slide-up" style={{ borderColor: "rgba(16, 185, 129,0.28)" }}>
        <div style={{
          position: "absolute", inset: 0, opacity: 0.4,
          background: "radial-gradient(60% 100% at 0% 0%, rgba(16, 185, 129,0.18), transparent 70%)",
          pointerEvents: "none"
        }} />
        <div className="grid grid-cols-12 gap-6 items-center relative">
          <div className="col-span-7">
            <div className="text-xs uppercase tracking-widest text-amber mb-2" style={{ fontWeight: 600 }}>
              QUINTA-FEIRA · 15 DE MAIO DE 2026 · 09:42
            </div>
            <h1 className="text-4xl font-semibold tracking-tighter mb-3 text-balance">
              Bom dia, Eduardo. A operação está <em className="font-display italic" style={{ fontWeight: 400, color: "var(--success)" }}>em fluxo</em>.
            </h1>
            <p className="text-2 text-md max-w-2xl text-pretty">
              Você tem <b className="text-amber">3 solicitações urgentes</b> e <b className="text-amber">2 entregas agendadas para hoje</b>. A produção está 92% no prazo nesta semana — acima da média de Maio.
            </p>
            <div className="flex items-center gap-2 mt-5 flex-wrap">
              <button className="wood-btn wood-btn-primary" onClick={() => navigate("new-request")}>
                <Icon name="plus" size={14} /> Nova solicitação
              </button>
              <button className="wood-btn wood-btn-secondary" onClick={() => navigate("requests")}>
                <Icon name="inbox" size={14} /> Ver solicitações
              </button>
              <button className="wood-btn wood-btn-ghost" onClick={() => navigate("logistics")}>
                <Icon name="boxes" size={14} /> Carga de hoje
              </button>
            </div>
          </div>
          <div className="col-span-5">
            <ProductionPulse />
          </div>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        <MetricCard icon="inbox" label="Solicitações ativas" value={m.activeRequests} sub="8 novas esta semana" trend={12} accent="amber" delay={0} />
        <MetricCard icon="hammer" label="Obras em andamento" value={m.activeProjects} sub="3 concluindo até sex." trend={6} accent="info" delay={60} />
        <MetricCard icon="trend-up" label="Entregas no prazo" value={`${m.onTime}%`} sub="acima da meta (88%)" trend={3} accent="success" delay={120} />
        <MetricCard icon="alert" label="Solicitações atrasadas" value="3" sub="−1 desde ontem" trend={-25} accent="warning" delay={180} />
      </div>

      {/* Main grid */}
      <div className="grid grid-cols-12 gap-5">
        {/* Urgent requests — featured */}
        <div className="col-span-8 slide-up" style={{ animationDelay: "240ms" }}>
          <div className="wood-card p-5">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <div style={{
                  width: 32, height: 32, borderRadius: 9,
                  background: "rgba(239,68,68,0.12)", color: "#EF4444",
                  display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <Icon name="fire" size={16} />
                </div>
                <div>
                  <div className="text-md font-semibold tracking-tight">Atenção operacional</div>
                  <div className="text-xs text-3">Solicitações que precisam de você agora</div>
                </div>
              </div>
              <button className="wood-btn wood-btn-ghost wood-btn-sm" onClick={() => navigate("requests")}>
                Ver todas <Icon name="arrow-right" size={12} />
              </button>
            </div>

            <div className="flex flex-col gap-2">
              {urgent.map((r, i) => (
                <UrgentRow key={r.id} r={r} onClick={() => setDrawer(r)} delay={i * 60} />
              ))}
            </div>
          </div>
        </div>

        {/* Right column */}
        <div className="col-span-4 flex flex-col gap-5">
          {/* Distribution */}
          <div className="wood-card p-5 slide-up" style={{ animationDelay: "260ms" }}>
            <div className="flex items-center justify-between mb-4">
              <div>
                <div className="text-md font-semibold tracking-tight">Distribuição de pedidos</div>
                <div className="text-xs text-3">por status atual</div>
              </div>
              <Icon name="activity" size={16} className="text-3" />
            </div>
            <DistChart dist={dist} />
          </div>

          {/* Today's logistics */}
          <div className="wood-card p-5 slide-up" style={{ animationDelay: "320ms" }}>
            <div className="flex items-center justify-between mb-4">
              <div>
                <div className="text-md font-semibold tracking-tight">Carga de hoje</div>
                <div className="text-xs text-3">15 de maio</div>
              </div>
              <button className="text-xs text-amber" style={{ fontWeight: 600, background: "none", border: "none", cursor: "pointer" }} onClick={() => navigate("logistics")}>Ver tudo</button>
            </div>
            <div className="flex flex-col gap-3">
              {MOCK.logistics.filter(l => l.date === "2026-05-15").map((l) => (
                <div key={l.id} className="flex items-start gap-3">
                  <div style={{
                    width: 32, height: 32, borderRadius: 9, flexShrink: 0,
                    background: l.type === "saida" ? "rgba(16, 185, 129,0.14)" : "rgba(56,189,248,0.14)",
                    color: l.type === "saida" ? "var(--amber-bright)" : "var(--info)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: "1px solid var(--wood-border)"
                  }}>
                    <Icon name={l.type === "saida" ? "send" : "package"} size={14} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm" style={{ fontWeight: 500 }}>{l.title}</div>
                    <div className="text-xs text-3 truncate flex items-center gap-1.5">
                      <Icon name="clock" size={10} /> {l.time} · {l.local.split(",")[0]}
                    </div>
                  </div>
                  {l.urgent && <span className="wood-badge wood-badge-error" style={{ padding: "1px 6px", fontSize: 9.5 }}>URG</span>}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Projects in progress */}
        <div className="col-span-7 slide-up" style={{ animationDelay: "360ms" }}>
          <div className="wood-card p-5">
            <div className="flex items-center justify-between mb-4">
              <div>
                <div className="text-md font-semibold tracking-tight">Obras em andamento</div>
                <div className="text-xs text-3">progresso operacional em tempo real</div>
              </div>
              <button className="wood-btn wood-btn-ghost wood-btn-sm" onClick={() => navigate("projects")}>
                Ver todas <Icon name="arrow-right" size={12} />
              </button>
            </div>
            <div className="flex flex-col gap-3">
              {activeProjects.slice(0, 4).map((p, i) => (
                <div key={p.id} className="px-4 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.16)", border: "1px solid var(--wood-border-soft)" }}>
                  <div className="flex items-center justify-between gap-3 mb-2">
                    <div className="flex items-center gap-3 min-w-0">
                      <div style={{
                        width: 30, height: 30, borderRadius: 8, flexShrink: 0,
                        background: "linear-gradient(135deg, #065F46, #011712)",
                        color: "var(--cream)", border: "1px solid var(--wood-border)",
                        display: "inline-flex", alignItems: "center", justifyContent: "center"
                      }}>
                        <Icon name="hammer" size={14} />
                      </div>
                      <div className="min-w-0">
                        <div className="text-sm truncate" style={{ fontWeight: 600 }}>{p.name}</div>
                        <div className="text-xs text-3 truncate">{p.client} · {p.team}</div>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 flex-shrink-0">
                      <StatusPill status={p.status} />
                      <div className="text-sm font-semibold w-8 text-right" style={{ fontVariantNumeric: "tabular-nums" }}>{p.progress}%</div>
                    </div>
                  </div>
                  <AnimatedProgress value={p.progress} max={100} height={4} />
                  <div className="flex items-center justify-between mt-2 text-xs text-3">
                    <span className="flex items-center gap-1"><Icon name="calendar" size={11} /> Entrega {fmtDateLong(p.deadline)}</span>
                    <span className="flex items-center gap-1"><Icon name="inbox" size={11} /> {p.requestsCount} solicitações · {p.urgent} urgentes</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Teams & inventory mini */}
        <div className="col-span-5 flex flex-col gap-5">
          <div className="wood-card p-5 slide-up" style={{ animationDelay: "400ms" }}>
            <div className="flex items-center justify-between mb-4">
              <div className="text-md font-semibold tracking-tight">Carga das equipes</div>
              <button className="text-xs text-amber" style={{ fontWeight: 600, background: "none", border: "none", cursor: "pointer" }} onClick={() => navigate("teams")}>Gerenciar</button>
            </div>
            <div className="flex flex-col gap-3.5">
              {MOCK.teams.map(t => (
                <div key={t.id}>
                  <div className="flex items-center justify-between mb-1.5">
                    <div className="flex items-center gap-2 min-w-0">
                      <Avatar name={t.leader} size={26} />
                      <div className="min-w-0">
                        <div className="text-sm truncate" style={{ fontWeight: 500 }}>{t.name}</div>
                      </div>
                    </div>
                    <span className="text-sm" style={{ fontVariantNumeric: "tabular-nums", color: t.load > 80 ? "var(--warning)" : t.load > 60 ? "var(--amber-bright)" : "var(--text-2)", fontWeight: 600 }}>{t.load}%</span>
                  </div>
                  <AnimatedProgress value={t.load} max={100} height={4} color={t.load > 80 ? "linear-gradient(90deg, #F59E0B, #EF4444)" : undefined} />
                </div>
              ))}
            </div>
          </div>

          <div className="wood-card p-5 slide-up" style={{ animationDelay: "440ms" }}>
            <div className="flex items-center justify-between mb-3">
              <div className="text-md font-semibold tracking-tight">Almoxarifado · pendências</div>
              <button className="text-xs text-amber" style={{ fontWeight: 600, background: "none", border: "none", cursor: "pointer" }} onClick={() => navigate("inventory")}>Abrir</button>
            </div>
            <div className="flex flex-col gap-2.5">
              {MOCK.inventory.filter(i => i.status === "pendente" || i.status === "atrasado").slice(0, 3).map((it) => (
                <div key={it.id} className="flex items-center gap-2.5">
                  <span className="wood-dot" style={{ background: it.status === "atrasado" ? "var(--error)" : "var(--warning)", boxShadow: it.status === "atrasado" ? "0 0 6px var(--error)" : "0 0 6px var(--warning)" }} />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm truncate" style={{ fontWeight: 500 }}>{it.item}</div>
                    <div className="text-xs text-3 truncate">{it.supplier} · {fmtBRL(it.value)}</div>
                  </div>
                  <StatusPill status={it.status} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Request drawer */}
      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.title}
        subtitle={drawer?.id}
        actions={
          <>
            <button className="wood-btn wood-btn-secondary" onClick={() => setDrawer(null)}>Fechar</button>
            <button className="wood-btn wood-btn-primary">
              Avançar status <Icon name="arrow-right" size={13} />
            </button>
          </>
        }
      >
        {drawer && <RequestDetail r={drawer} />}
      </PremiumDrawer>
    </>
  );
};

/* ============================================================
   Urgent request row
   ============================================================ */
const UrgentRow = ({ r, onClick, delay }) => {
  const dleft = daysUntil(r.deadline);
  const overdue = dleft < 0;
  return (
    <div
      onClick={onClick}
      className="flex items-center gap-4 px-4 py-3 rounded-lg cursor-pointer slide-up"
      style={{
        background: overdue ? "linear-gradient(90deg, rgba(239,68,68,0.08), transparent 70%)" : "rgba(16, 185, 129,0.05)",
        border: `1px solid ${overdue ? "rgba(239,68,68,0.2)" : "rgba(16, 185, 129,0.18)"}`,
        animationDelay: `${delay}ms`,
        transition: "transform 0.24s, border-color 0.24s"
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; }}
    >
      <div style={{
        width: 34, height: 34, borderRadius: 9, flexShrink: 0,
        background: overdue ? "rgba(239,68,68,0.16)" : "rgba(16, 185, 129,0.16)",
        color: overdue ? "#EF4444" : "#34D399",
        display: "inline-flex", alignItems: "center", justifyContent: "center"
      }}>
        <Icon name={overdue ? "alert" : "fire"} size={15} />
      </div>
      <div className="font-mono text-xs text-3" style={{ width: 64, fontVariantNumeric: "tabular-nums" }}>{r.id}</div>
      <div className="flex-1 min-w-0">
        <div className="text-sm truncate" style={{ fontWeight: 600 }}>{r.title}</div>
        <div className="text-xs text-3 truncate">{r.client} · {r.responsible}</div>
      </div>
      <div className="text-right">
        <div className={`text-sm ${overdue ? "text-error" : "text-warning"}`} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
          {overdue ? `${Math.abs(dleft)}d atrasado` : `${dleft}d restantes`}
        </div>
        <div className="text-xs text-4">{fmtDateLong(r.deadline)}</div>
      </div>
      <div style={{ width: 64 }}>
        <AnimatedProgress value={r.progress} max={100} height={4} />
      </div>
      <StatusPill status={r.status} />
      <Icon name="chevron-right" size={13} className="text-4" />
    </div>
  );
};

/* ============================================================
   Production pulse — small animated visual
   ============================================================ */
const ProductionPulse = () => {
  return (
    <div className="wood-card relative overflow-hidden p-5" style={{ background: "rgba(0,0,0,0.32)", borderColor: "rgba(16, 185, 129,0.32)" }}>
      <div className="flex items-center justify-between mb-3">
        <div>
          <div className="text-xs uppercase tracking-widest text-3 mb-0.5" style={{ fontWeight: 500 }}>PRODUÇÃO · AGORA</div>
          <div className="text-2xl font-semibold tracking-tight wood-gradient-text">12 obras ativas</div>
        </div>
        <div className="wood-badge wood-badge-success">
          <span className="wood-dot wood-dot-pulse" style={{ background: "var(--success)", color: "var(--success)" }} />
          Em fluxo
        </div>
      </div>

      {/* Pulse bars */}
      <div className="flex items-end gap-1" style={{ height: 80, alignItems: "flex-end" }}>
        {[34, 56, 48, 72, 62, 84, 58, 76, 90, 68, 78, 95, 82, 70, 88, 64, 92, 85, 78, 95].map((v, i) => (
          <div
            key={i}
            style={{
              flex: 1, height: `${v}%`,
              background: i >= 14 ? "linear-gradient(180deg, var(--amber-bright), var(--amber-deep))" : "rgba(16, 185, 129,0.18)",
              borderRadius: "2px 2px 0 0",
              opacity: i >= 17 ? 1 : 0.7 + i * 0.015,
              animation: i >= 17 ? `pulse-bar 1.8s ease-in-out infinite` : "none",
              animationDelay: `${i * 0.1}s`
            }}
          />
        ))}
      </div>
      <div className="flex items-center justify-between text-xs text-4 mt-2">
        <span>−6h</span>
        <span>−3h</span>
        <span className="text-amber" style={{ fontWeight: 600 }}>AGORA</span>
      </div>

      <style>{`
        @keyframes pulse-bar {
          0%, 100% { transform: scaleY(1); }
          50% { transform: scaleY(0.85); }
        }
      `}</style>
    </div>
  );
};

/* ============================================================
   Distribution donut chart
   ============================================================ */
const DistChart = ({ dist }) => {
  const order = ["pendente", "analise", "producao", "pronto", "entregue", "finalizado", "atrasado", "cancelado"];
  const filtered = order.filter(k => dist[k]);
  const total = Object.values(dist).reduce((a, b) => a + b, 0);
  let off = 0;
  const C = 2 * Math.PI * 40;

  return (
    <div className="flex items-center gap-5">
      <div style={{ position: "relative", width: 120, height: 120, flexShrink: 0 }}>
        <svg width="120" height="120" viewBox="0 0 100 100" style={{ transform: "rotate(-90deg)" }}>
          <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255, 255, 255,0.05)" strokeWidth="12" />
          {filtered.map((k) => {
            const v = dist[k];
            const portion = (v / total) * C;
            const stroke = STATUS_MAP[k]?.dot || "#737373";
            const el = (
              <circle
                key={k}
                cx="50" cy="50" r="40" fill="none"
                stroke={stroke}
                strokeWidth="12"
                strokeDasharray={`${portion} ${C}`}
                strokeDashoffset={-off}
                strokeLinecap="butt"
                style={{ transition: "stroke-dasharray 0.6s var(--ease-out)" }}
              />
            );
            off += portion;
            return el;
          })}
        </svg>
        <div style={{
          position: "absolute", inset: 0, display: "flex",
          flexDirection: "column", alignItems: "center", justifyContent: "center"
        }}>
          <div className="text-2xl font-semibold tracking-tight" style={{ fontVariantNumeric: "tabular-nums" }}>{total}</div>
          <div className="text-xs text-4">pedidos</div>
        </div>
      </div>
      <div className="flex flex-col gap-1.5 flex-1 min-w-0">
        {filtered.map(k => (
          <div key={k} className="flex items-center gap-2 text-sm">
            <span className="wood-dot" style={{ background: STATUS_MAP[k]?.dot, width: 7, height: 7 }} />
            <span className="text-2 flex-1 truncate">{STATUS_MAP[k]?.label || k}</span>
            <span className="text-3" style={{ fontVariantNumeric: "tabular-nums" }}>{dist[k]}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ============================================================
   Request detail (drawer content)
   ============================================================ */
const RequestDetail = ({ r }) => {
  const dleft = daysUntil(r.deadline);
  return (
    <div>
      <div className="flex items-center gap-2 mb-5 flex-wrap">
        <StatusPill status={r.status} />
        {r.urgent && <span className="wood-badge wood-badge-error"><Icon name="fire" size={10} /> Urgente</span>}
        <span className="wood-badge wood-badge-neutral">Prioridade {r.priority}</span>
      </div>

      <div className="grid grid-cols-2 gap-3 mb-6">
        {[
          { label: "Cliente", value: r.client, icon: "users" },
          { label: "Obra", value: r.project, icon: "hammer" },
          { label: "Responsável", value: r.responsible, icon: "shield" },
          { label: "Itens", value: `${r.items} produto(s)`, icon: "package" },
          { label: "Prazo", value: fmtDateLong(r.deadline), icon: "calendar" },
          { label: dleft >= 0 ? "Restam" : "Atraso", value: `${Math.abs(dleft)} dias`, icon: "clock", color: dleft < 0 ? "var(--error)" : dleft <= 5 ? "var(--warning)" : "var(--success)" },
        ].map(d => (
          <div key={d.label} className="px-3 py-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
            <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>{d.label}</div>
            <div className="text-sm flex items-center gap-2" style={{ fontWeight: 500, color: d.color || undefined }}>
              <Icon name={d.icon} size={13} className="text-3" /> {d.value}
            </div>
          </div>
        ))}
      </div>

      <div className="mb-6">
        <div className="flex items-center justify-between mb-2">
          <div className="text-sm font-semibold">Progresso operacional</div>
          <span className="text-sm" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{r.progress}%</span>
        </div>
        <AnimatedProgress value={r.progress} max={100} height={6} />
        <div className="flex justify-between text-xs text-4 mt-2">
          {["Nova", "Análise", "Produção", "Pronta", "Entregue"].map((s, i) => (
            <span key={s} className={r.progress >= i * 25 ? "text-amber" : ""}>{s}</span>
          ))}
        </div>
      </div>

      {r.notes && (
        <div className="mb-6">
          <div className="text-sm font-semibold mb-2">Notas</div>
          <div className="p-4 rounded-lg text-sm text-2" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
            {r.notes}
          </div>
        </div>
      )}

      <div className="mb-6">
        <div className="text-sm font-semibold mb-2">Anexos ({r.attachments})</div>
        <div className="grid grid-cols-3 gap-2">
          {Array.from({ length: r.attachments }).map((_, i) => (
            <div key={i} className="flex items-center gap-2 p-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
              <Icon name="file-text" size={16} className="text-amber" />
              <div className="text-xs truncate flex-1">arquivo_{i + 1}.pdf</div>
            </div>
          ))}
        </div>
      </div>

      <div>
        <div className="text-sm font-semibold mb-2">Atividade recente</div>
        <div className="flex flex-col gap-3">
          {[
            { user: r.responsible, action: "atualizou status para " + STATUS_MAP[r.status]?.label, time: "há 2h" },
            { user: "Eduardo Marques", action: "anexou arquivo orçamento.pdf", time: "ontem" },
            { user: "Sistema", action: "solicitação criada", time: fmtDateLong(r.createdAt) },
          ].map((a, i) => (
            <div key={i} className="flex items-start gap-3">
              <Avatar name={a.user} size={28} />
              <div className="flex-1 text-sm">
                <span style={{ fontWeight: 500 }}>{a.user}</span>{" "}
                <span className="text-3">{a.action}</span>
                <div className="text-xs text-4 mt-0.5">{a.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Dashboard, RequestDetail });