/* Wood OS — Operational pages: Requests, NewRequest, Projects, Teams */
const { useState: useStateOp, useMemo: useMemoOp } = React;

/* ============================================================
   REQUESTS (Solicitações)
   ============================================================ */
const RequestsPage = ({ navigate }) => {
  const [filter, setFilter] = useStateOp("todos");
  const [priority, setPriority] = useStateOp("todas");
  const [q, setQ] = useStateOp("");
  const [drawer, setDrawer] = useStateOp(null);
  const [view, setView] = useStateOp("list");
  const [deleting, setDeleting] = useStateOp(null);

  const filtered = useMemoOp(() => {
    return MOCK.requests.filter(r => {
      if (filter !== "todos" && r.status !== filter) return false;
      if (priority !== "todas" && r.priority !== priority) return false;
      if (q && !`${r.title} ${r.client} ${r.id}`.toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
  }, [filter, priority, q]);

  const counts = useMemoOp(() => {
    const c = { todos: MOCK.requests.length };
    MOCK.requests.forEach(r => { c[r.status] = (c[r.status] || 0) + 1; });
    return c;
  }, []);

  return (
    <>
      <PageHeader
        kicker="Operacional"
        title="Solicitações"
        subtitle="Cada pedido com prioridade, prazo e responsável. Acompanhe o fluxo de produção em tempo real."
        actions={
          <>
            <div className="iflex items-center" style={{ background: "var(--wood-surface-2)", border: "1px solid var(--wood-border)", borderRadius: 10, padding: 2 }}>
              <button onClick={() => setView("list")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "list" ? "rgba(16, 185, 129,0.16)" : "transparent", color: view === "list" ? "var(--cream)" : undefined }}>
                <Icon name="log" size={13} /> Lista
              </button>
              <button onClick={() => setView("board")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "board" ? "rgba(16, 185, 129,0.16)" : "transparent", color: view === "board" ? "var(--cream)" : undefined }}>
                <Icon name="layers" size={13} /> Quadro
              </button>
            </div>
            <button className="wood-btn wood-btn-secondary"><Icon name="filter" size={13} /> Filtros</button>
            <button className="wood-btn wood-btn-primary" onClick={() => navigate("new-request")}>
              <Icon name="plus" size={13} /> Nova solicitação
            </button>
          </>
        }
      />

      {/* Filter chips */}
      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        <FilterChip active={filter === "todos"} onClick={() => setFilter("todos")} count={counts.todos}>Todos</FilterChip>
        <FilterChip active={filter === "pendente"} onClick={() => setFilter("pendente")} count={counts.pendente}>Pendentes</FilterChip>
        <FilterChip active={filter === "analise"} onClick={() => setFilter("analise")} count={counts.analise}>Em análise</FilterChip>
        <FilterChip active={filter === "producao"} onClick={() => setFilter("producao")} count={counts.producao}>Em produção</FilterChip>
        <FilterChip active={filter === "pronto"} onClick={() => setFilter("pronto")} count={counts.pronto}>Pronto</FilterChip>
        <FilterChip active={filter === "atrasado"} onClick={() => setFilter("atrasado")} count={counts.atrasado}>Atrasado</FilterChip>
        <div className="wood-divider md-hide" style={{ width: 1, height: 24, background: "var(--wood-border)" }} />
        <div className="flex items-center gap-2 flex-1" style={{ minWidth: 220 }}>
          <Icon name="search" size={14} className="text-3" />
          <input
            className="flex-1"
            style={{ background: "transparent", border: "none", outline: "none", fontSize: 13, color: "var(--text)" }}
            placeholder="Buscar por ID, título ou cliente…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
        </div>
      </div>

      {view === "list" ? (
        <RequestList items={filtered} onOpen={setDrawer} onDelete={setDeleting} />
      ) : (
        <RequestBoard items={filtered} onOpen={setDrawer} />
      )}

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.title}
        subtitle={drawer?.id}
        actions={
          <>
            <button className="wood-btn wood-btn-ghost" onClick={() => { setDeleting(drawer); setDrawer(null); }} style={{ color: "var(--error)" }}>
              <Icon name="trash" size={13} /> Excluir
            </button>
            <div className="flex-1" />
            <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>

      <ConfirmModal
        open={!!deleting}
        onClose={() => setDeleting(null)}
        onConfirm={() => {}}
        title="Excluir solicitação?"
        description={`Tem certeza que deseja excluir ${deleting?.id} — "${deleting?.title}"? Esta ação não pode ser desfeita.`}
        confirmLabel="Excluir solicitação"
        danger
      />
    </>
  );
};

const RequestList = ({ items, onOpen, onDelete }) => {
  if (!items.length) return <EmptyState icon="inbox" title="Nenhuma solicitação" description="Ajuste os filtros ou crie uma nova solicitação." />;
  return (
    <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
      <table className="wood-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Solicitação</th>
            <th>Cliente / Obra</th>
            <th>Status</th>
            <th>Progresso</th>
            <th>Prazo</th>
            <th>Responsável</th>
            <th style={{ width: 60 }}></th>
          </tr>
        </thead>
        <tbody>
          {items.map((r) => {
            const dleft = daysUntil(r.deadline);
            const overdue = dleft < 0;
            return (
              <tr key={r.id} onClick={() => onOpen(r)} style={{ cursor: "pointer" }}>
                <td className="font-mono text-3" style={{ fontSize: 12 }}>{r.id}</td>
                <td>
                  <div className="flex items-center gap-2">
                    {r.urgent && <Icon name="fire" size={13} className="text-amber-bright" />}
                    <span style={{ fontWeight: 600, color: "var(--text)" }}>{r.title}</span>
                  </div>
                </td>
                <td>
                  <div className="text-sm">{r.client}</div>
                  <div className="text-xs text-4">{r.project}</div>
                </td>
                <td><StatusPill status={r.status} pulse={r.status === "producao"} /></td>
                <td style={{ width: 110 }}>
                  <div className="flex items-center gap-2">
                    <div style={{ flex: 1 }}><AnimatedProgress value={r.progress} max={100} height={4} /></div>
                    <span className="text-xs text-3" style={{ width: 28, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{r.progress}%</span>
                  </div>
                </td>
                <td>
                  <div className={`text-sm ${overdue ? "text-error" : dleft <= 5 ? "text-warning" : ""}`} style={{ fontWeight: 500 }}>
                    {fmtDate(r.deadline)}
                  </div>
                  <div className="text-xs text-4">
                    {overdue ? `${Math.abs(dleft)}d atrasado` : `em ${dleft}d`}
                  </div>
                </td>
                <td>
                  <div className="flex items-center gap-2">
                    <Avatar name={r.responsible} size={24} />
                    <span className="text-sm">{r.responsible.split(" ")[0]}</span>
                  </div>
                </td>
                <td onClick={e => e.stopPropagation()}>
                  <button className="wood-btn wood-btn-ghost wood-btn-icon-sm">
                    <Icon name="more" size={14} />
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

const RequestBoard = ({ items, onOpen }) => {
  const cols = ["pendente", "analise", "producao", "pronto"];
  return (
    <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${cols.length}, minmax(0,1fr))` }}>
      {cols.map(col => {
        const colItems = items.filter(r => r.status === col);
        return (
          <div key={col} className="wood-card p-3" style={{ background: "rgba(0,0,0,0.18)" }}>
            <div className="flex items-center justify-between mb-3 px-1">
              <div className="flex items-center gap-2">
                <span className="wood-dot" style={{ background: STATUS_MAP[col]?.dot }} />
                <span className="text-sm" style={{ fontWeight: 600 }}>{STATUS_MAP[col]?.label}</span>
              </div>
              <span className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums" }}>{colItems.length}</span>
            </div>
            <div className="flex flex-col gap-2">
              {colItems.map((r, i) => (
                <div
                  key={r.id}
                  onClick={() => onOpen(r)}
                  className="wood-card p-3 cursor-pointer slide-up"
                  style={{ animationDelay: `${i * 40}ms`, background: "var(--wood-card-solid)" }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = "var(--wood-border-strong)"}
                  onMouseLeave={e => e.currentTarget.style.borderColor = "var(--wood-border)"}
                >
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-mono text-xs text-4">{r.id}</span>
                    {r.urgent && <Icon name="fire" size={12} className="text-amber-bright" />}
                  </div>
                  <div className="text-sm mb-2" style={{ fontWeight: 600 }}>{r.title}</div>
                  <div className="text-xs text-3 mb-3 truncate">{r.client}</div>
                  <AnimatedProgress value={r.progress} max={100} height={3} />
                  <div className="flex items-center justify-between mt-3">
                    <Avatar name={r.responsible} size={22} />
                    <span className="text-xs text-3">{fmtDate(r.deadline)}</span>
                  </div>
                </div>
              ))}
              {!colItems.length && (
                <div className="text-center py-6 text-xs text-4">Sem solicitações</div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
};

/* ============================================================
   NEW REQUEST
   ============================================================ */
const NewRequestPage = ({ navigate }) => {
  const [step, setStep] = useStateOp(1);
  const [data, setData] = useStateOp({
    title: "", client: "", project: "", priority: "media",
    items: [{ name: "", qty: 1, unit: "un" }], deadline: "", notes: "", attachments: []
  });
  const [submitted, setSubmitted] = useStateOp(false);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const valid = step === 1 ? data.title && data.client && data.project : step === 2 ? data.items.every(i => i.name) : data.deadline;

  if (submitted) {
    return (
      <div className="max-w-2xl mx-auto py-12 slide-up">
        <div className="wood-card wood-veneer p-10 text-center">
          <div style={{
            width: 80, height: 80, margin: "0 auto 20px", borderRadius: "50%",
            background: "rgba(52,211,153,0.16)", color: "var(--success)",
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
            <Icon name="check-circle" size={36} strokeWidth={2} />
          </div>
          <h2 className="text-3xl font-semibold tracking-tighter mb-2">Solicitação criada!</h2>
          <p className="text-3 mb-6 max-w-md mx-auto text-pretty">
            <span className="font-mono text-amber">WO-2815</span> · {data.title} foi adicionada à fila de produção. O responsável será notificado.
          </p>
          <div className="flex items-center justify-center gap-2">
            <button className="wood-btn wood-btn-secondary" onClick={() => navigate("requests")}>Ver solicitações</button>
            <button className="wood-btn wood-btn-primary" onClick={() => { setSubmitted(false); setStep(1); setData({ title: "", client: "", project: "", priority: "media", items: [{ name: "", qty: 1, unit: "un" }], deadline: "", notes: "", attachments: [] }); }}>
              <Icon name="plus" size={14} /> Nova outra
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <>
      <PageHeader
        kicker="Operacional"
        title="Nova Solicitação"
        subtitle="Crie um pedido de produção em três etapas. Wood OS lida com o resto."
        actions={
          <button className="wood-btn wood-btn-ghost" onClick={() => navigate("requests")}>
            <Icon name="x" size={14} /> Cancelar
          </button>
        }
      />

      {/* Stepper */}
      <div className="wood-card p-4 mb-5 flex items-center gap-3">
        {[
          { n: 1, label: "Identificação" },
          { n: 2, label: "Itens & detalhes" },
          { n: 3, label: "Prazo & finalização" }
        ].map((s, i) => (
          <React.Fragment key={s.n}>
            <div className="flex items-center gap-3 cursor-pointer" onClick={() => step > s.n && setStep(s.n)}>
              <div style={{
                width: 32, height: 32, borderRadius: "50%",
                background: step >= s.n ? "linear-gradient(180deg, var(--amber-bright), var(--amber-deep))" : "rgba(255, 255, 255,0.04)",
                color: step >= s.n ? "#0a0a0a" : "var(--text-4)",
                border: `1px solid ${step >= s.n ? "transparent" : "var(--wood-border)"}`,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 13, fontWeight: 700,
                transition: "all 0.24s var(--ease-out)"
              }}>
                {step > s.n ? <Icon name="check" size={14} /> : s.n}
              </div>
              <div>
                <div className="text-xs text-4">Etapa {s.n}</div>
                <div className="text-sm" style={{ fontWeight: 500, color: step >= s.n ? "var(--text)" : "var(--text-3)" }}>{s.label}</div>
              </div>
            </div>
            {i < 2 && <div style={{ flex: 1, height: 1, background: step > s.n ? "var(--amber)" : "var(--wood-border)", margin: "0 4px", transition: "background 0.4s" }} />}
          </React.Fragment>
        ))}
      </div>

      <div className="grid grid-cols-12 gap-5">
        <div className="col-span-8">
          <div className="wood-card p-6 slide-up" key={step}>
            {step === 1 && (
              <div>
                <h3 className="text-xl font-semibold tracking-tight mb-1">Identificação da solicitação</h3>
                <p className="text-3 text-sm mb-6">Defina título, cliente e obra associada.</p>

                <div className="mb-4">
                  <label className="wood-label">Título da solicitação</label>
                  <input className="wood-input" placeholder="Ex: Painel ripado para sala de estar" value={data.title} onChange={e => update("title", e.target.value)} />
                </div>

                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="wood-label">Cliente</label>
                    <input className="wood-input" placeholder="Nome do cliente" value={data.client} onChange={e => update("client", e.target.value)} />
                  </div>
                  <div>
                    <label className="wood-label">Obra vinculada</label>
                    <select className="wood-select" value={data.project} onChange={e => update("project", e.target.value)}>
                      <option value="">Selecione…</option>
                      {MOCK.projects.map(p => <option key={p.id} value={p.name}>{p.name}</option>)}
                    </select>
                  </div>
                </div>

                <div>
                  <label className="wood-label">Prioridade</label>
                  <div className="flex gap-2">
                    {[
                      { v: "baixa", label: "Baixa", color: "#737373" },
                      { v: "media", label: "Média", color: "#38BDF8" },
                      { v: "alta", label: "Alta", color: "#F59E0B" },
                      { v: "critica", label: "Crítica", color: "#EF4444" },
                    ].map(opt => (
                      <button
                        key={opt.v}
                        type="button"
                        onClick={() => update("priority", opt.v)}
                        className="flex-1 py-3 rounded-lg flex items-center justify-center gap-2"
                        style={{
                          background: data.priority === opt.v ? `${opt.color}22` : "var(--wood-surface-2)",
                          border: `1px solid ${data.priority === opt.v ? opt.color + "88" : "var(--wood-border)"}`,
                          color: data.priority === opt.v ? opt.color : "var(--text-2)",
                          cursor: "pointer", fontWeight: data.priority === opt.v ? 600 : 500,
                          transition: "all 0.18s"
                        }}
                      >
                        <span className="wood-dot" style={{ background: opt.color }} /> {opt.label}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {step === 2 && (
              <div>
                <h3 className="text-xl font-semibold tracking-tight mb-1">Itens da solicitação</h3>
                <p className="text-3 text-sm mb-6">Liste o que precisa ser produzido. Você pode adicionar quantos quiser.</p>

                <div className="flex flex-col gap-3 mb-4">
                  {data.items.map((it, i) => (
                    <div key={i} className="flex items-end gap-3 p-3 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                      <div className="font-mono text-xs text-4 pb-3">#{String(i + 1).padStart(2, "0")}</div>
                      <div className="flex-1">
                        <label className="wood-label">Descrição</label>
                        <input className="wood-input" placeholder="Ex: Painel ripado 2,4 × 3,0m" value={it.name} onChange={e => update("items", data.items.map((x, j) => j === i ? { ...x, name: e.target.value } : x))} />
                      </div>
                      <div style={{ width: 100 }}>
                        <label className="wood-label">Qtd.</label>
                        <input type="number" className="wood-input" value={it.qty} onChange={e => update("items", data.items.map((x, j) => j === i ? { ...x, qty: e.target.value } : x))} />
                      </div>
                      <div style={{ width: 90 }}>
                        <label className="wood-label">Unidade</label>
                        <select className="wood-select" value={it.unit} onChange={e => update("items", data.items.map((x, j) => j === i ? { ...x, unit: e.target.value } : x))}>
                          <option>un</option><option>m</option><option>m²</option><option>kg</option><option>peça</option>
                        </select>
                      </div>
                      {data.items.length > 1 && (
                        <button
                          type="button"
                          className="wood-btn wood-btn-ghost wood-btn-icon"
                          onClick={() => update("items", data.items.filter((_, j) => j !== i))}
                        ><Icon name="trash" size={14} /></button>
                      )}
                    </div>
                  ))}
                </div>

                <button
                  type="button"
                  className="wood-btn wood-btn-secondary w-full"
                  onClick={() => update("items", [...data.items, { name: "", qty: 1, unit: "un" }])}
                >
                  <Icon name="plus" size={14} /> Adicionar item
                </button>

                <div className="mt-6">
                  <label className="wood-label">Anexos (opcional)</label>
                  <div className="p-6 rounded-lg text-center cursor-pointer" style={{
                    background: "rgba(0,0,0,0.18)", border: "1.5px dashed var(--wood-border-strong)"
                  }}>
                    <Icon name="paperclip" size={20} className="text-3 mx-auto mb-2" />
                    <div className="text-sm" style={{ fontWeight: 500 }}>Arraste arquivos ou clique para anexar</div>
                    <div className="text-xs text-4 mt-1">PDF, DWG, imagens · até 25MB cada</div>
                  </div>
                </div>
              </div>
            )}

            {step === 3 && (
              <div>
                <h3 className="text-xl font-semibold tracking-tight mb-1">Prazo & notas</h3>
                <p className="text-3 text-sm mb-6">Defina a data limite e adicione observações finais.</p>

                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="wood-label">Data limite</label>
                    <input type="date" className="wood-input" value={data.deadline} onChange={e => update("deadline", e.target.value)} />
                  </div>
                  <div>
                    <label className="wood-label">Responsável</label>
                    <select className="wood-select">
                      <option>Eduardo Marques (você)</option>
                      <option>Ricardo Tavares</option>
                      <option>Tiago Carvalho</option>
                      <option>Marcos Lima</option>
                    </select>
                  </div>
                </div>

                <div className="mb-4">
                  <label className="wood-label">Notas internas (opcional)</label>
                  <textarea className="wood-textarea" rows={4} placeholder="Detalhes sobre acabamento, medidas críticas, observações do cliente…" value={data.notes} onChange={e => update("notes", e.target.value)} />
                </div>

                {/* Summary */}
                <div className="wood-card wood-veneer p-5 mt-6" style={{ background: "rgba(16, 185, 129,0.04)" }}>
                  <div className="text-xs uppercase tracking-widest text-amber mb-3" style={{ fontWeight: 600 }}>RESUMO</div>
                  <div className="grid grid-cols-2 gap-3 text-sm">
                    <div><span className="text-3">Título:</span> <b className="text-default">{data.title || "—"}</b></div>
                    <div><span className="text-3">Cliente:</span> <b className="text-default">{data.client || "—"}</b></div>
                    <div><span className="text-3">Obra:</span> <b className="text-default">{data.project || "—"}</b></div>
                    <div><span className="text-3">Prioridade:</span> <b className="text-default" style={{ textTransform: "capitalize" }}>{data.priority}</b></div>
                    <div><span className="text-3">Itens:</span> <b className="text-default">{data.items.filter(i => i.name).length}</b></div>
                    <div><span className="text-3">Prazo:</span> <b className="text-default">{data.deadline ? fmtDateLong(data.deadline) : "—"}</b></div>
                  </div>
                </div>
              </div>
            )}

            <div className="flex items-center justify-between mt-7 pt-5 border-t">
              <button
                className="wood-btn wood-btn-ghost"
                onClick={() => step > 1 ? setStep(step - 1) : navigate("requests")}
              >
                <Icon name="chevron-left" size={13} /> {step > 1 ? "Voltar" : "Cancelar"}
              </button>
              {step < 3 ? (
                <button
                  className="wood-btn wood-btn-primary"
                  disabled={!valid}
                  onClick={() => setStep(step + 1)}
                >
                  Próxima etapa <Icon name="arrow-right" size={13} />
                </button>
              ) : (
                <button className="wood-btn wood-btn-primary" disabled={!valid} onClick={() => setSubmitted(true)}>
                  <Icon name="check" size={14} /> Criar solicitação
                </button>
              )}
            </div>
          </div>
        </div>

        {/* Right helper panel */}
        <div className="col-span-4">
          <div className="wood-card p-5 sticky" style={{ top: 80 }}>
            <div className="text-xs uppercase tracking-widest text-amber mb-2" style={{ fontWeight: 600 }}>BOAS PRÁTICAS</div>
            <div className="text-md font-semibold tracking-tight mb-3">Por que detalhar?</div>
            <p className="text-3 text-sm mb-5 text-pretty">
              Solicitações detalhadas reduzem retrabalho em até 38%. Inclua medidas críticas, fornecedores preferidos e observações do cliente sempre que possível.
            </p>

            <div className="flex flex-col gap-3">
              {[
                { icon: "ruler", t: "Medidas exatas", d: "Inclua tolerâncias e pontos críticos." },
                { icon: "paperclip", t: "Anexe referências", d: "PDFs, fotos do local, plantas." },
                { icon: "calendar", t: "Prazo realista", d: "Considere disponibilidade da equipe." },
              ].map((tip) => (
                <div key={tip.t} className="flex items-start gap-3">
                  <div style={{
                    width: 30, height: 30, borderRadius: 8,
                    background: "rgba(16, 185, 129,0.12)", color: "var(--amber-bright)",
                    border: "1px solid var(--wood-border)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0
                  }}>
                    <Icon name={tip.icon} size={13} />
                  </div>
                  <div>
                    <div className="text-sm" style={{ fontWeight: 600 }}>{tip.t}</div>
                    <div className="text-xs text-3">{tip.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* ============================================================
   PROJECTS (Obras)
   ============================================================ */
const ProjectsPage = ({ navigate }) => {
  const [filter, setFilter] = useStateOp("todas");
  const [drawer, setDrawer] = useStateOp(null);
  const filtered = filter === "todas" ? MOCK.projects : MOCK.projects.filter(p => p.status === filter);

  return (
    <>
      <PageHeader
        kicker="Produção"
        title="Obras"
        subtitle="Visão completa de cada projeto em execução. Cliente, prazo, time, progresso e solicitações ligadas."
        actions={
          <>
            <button className="wood-btn wood-btn-secondary"><Icon name="filter" size={13} /> Filtros</button>
            <button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Nova obra</button>
          </>
        }
      />

      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        {["todas", "analise", "producao", "pronto", "entregue", "pendente"].map(s => (
          <FilterChip key={s} active={filter === s} onClick={() => setFilter(s)}>
            {s === "todas" ? "Todas" : STATUS_MAP[s]?.label}
          </FilterChip>
        ))}
      </div>

      <div className="grid grid-cols-3 gap-4">
        {filtered.map((p, i) => (
          <div key={p.id}
            className="wood-card wood-card-hover p-5 slide-up"
            style={{ animationDelay: `${i * 60}ms` }}
            onClick={() => setDrawer(p)}
          >
            <div className="flex items-start justify-between mb-3 gap-2">
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: "linear-gradient(135deg, #065F46, #011712)",
                color: "var(--cream)", border: "1px solid var(--wood-border-strong)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em"
              }}>{p.name.split(" ")[0].substring(0, 2).toUpperCase()}</div>
              <StatusPill status={p.status} pulse={p.status === "producao"} />
            </div>

            <div className="font-mono text-xs text-4 mb-1">{p.id}</div>
            <div className="text-lg font-semibold tracking-tight mb-1 truncate">{p.name}</div>
            <div className="text-sm text-3 mb-1 flex items-center gap-1.5"><Icon name="users" size={12} /> {p.client}</div>
            <div className="text-sm text-3 mb-4 flex items-center gap-1.5"><Icon name="map-pin" size={12} /> {p.address}</div>

            <div className="mb-4">
              <div className="flex items-center justify-between mb-1.5">
                <span className="text-xs text-3">Progresso</span>
                <span className="text-xs" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{p.progress}%</span>
              </div>
              <AnimatedProgress value={p.progress} max={100} height={5} />
            </div>

            <div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
              <div className="flex items-center gap-1.5">
                <Icon name="calendar" size={12} className="text-3" />
                <span className="text-xs text-3">{fmtDate(p.deadline)}</span>
              </div>
              <div className="flex items-center gap-3 text-xs">
                <span className="text-3 flex items-center gap-1"><Icon name="inbox" size={12} /> {p.requestsCount}</span>
                {p.urgent > 0 && <span className="text-amber flex items-center gap-1"><Icon name="fire" size={12} /> {p.urgent}</span>}
              </div>
            </div>
          </div>
        ))}
      </div>

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.name}
        subtitle={drawer?.id}
        actions={
          <>
            <button className="wood-btn wood-btn-secondary" onClick={() => setDrawer(null)}>Fechar</button>
            <button className="wood-btn wood-btn-primary"><Icon name="eye" size={13} /> Abrir obra</button>
          </>
        }
      >
        {drawer && <ProjectDetail p={drawer} />}
      </PremiumDrawer>
    </>
  );
};

const ProjectDetail = ({ p }) => (
  <div>
    <div className="flex items-center gap-2 mb-5 flex-wrap">
      <StatusPill status={p.status} pulse={p.status === "producao"} />
      <span className="wood-badge wood-badge-neutral"><Icon name="users" size={11} /> {p.team}</span>
    </div>

    {/* Cover */}
    <div className="wood-card wood-veneer p-5 mb-5" style={{ background: "linear-gradient(135deg, rgba(2, 44, 34,0.4), rgba(28,23,16,0.6))" }}>
      <div className="flex items-center justify-between mb-2">
        <div className="text-xs uppercase tracking-widest text-amber" style={{ fontWeight: 600 }}>OBRA EM ANDAMENTO</div>
        <div className="text-xs text-3">{fmtBRL(p.budget)}</div>
      </div>
      <div className="text-2xl font-semibold tracking-tighter mb-1">{p.name}</div>
      <div className="text-3 text-sm flex items-center gap-1.5"><Icon name="map-pin" size={12} /> {p.address}</div>
    </div>

    <div className="grid grid-cols-3 gap-2 mb-5">
      {[
        { label: "Progresso", value: `${p.progress}%`, accent: "amber" },
        { label: "Solicitações", value: p.requestsCount, accent: "info" },
        { label: "Urgentes", value: p.urgent, accent: p.urgent > 0 ? "warning" : "neutral" },
      ].map(s => (
        <div key={s.label} className="wood-card p-3" style={{ background: "rgba(0,0,0,0.18)" }}>
          <div className="text-xs text-4 mb-1">{s.label}</div>
          <div className="text-xl font-semibold tracking-tight" style={{
            color: s.accent === "amber" ? "var(--amber-bright)" :
                   s.accent === "warning" ? "var(--warning)" :
                   s.accent === "info" ? "var(--info)" : "var(--text)",
            fontVariantNumeric: "tabular-nums"
          }}>{s.value}</div>
        </div>
      ))}
    </div>

    <div className="mb-5">
      <div className="text-sm font-semibold mb-2">Timeline da obra</div>
      <ProjectTimeline progress={p.progress} deadline={p.deadline} />
    </div>

    <div>
      <div className="text-sm font-semibold mb-2">Solicitações vinculadas</div>
      <div className="flex flex-col gap-2">
        {MOCK.requests.filter(r => r.project === p.name).slice(0, 5).map(r => (
          <div key={r.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
            <span className="font-mono text-xs text-4" style={{ width: 64 }}>{r.id}</span>
            <span className="flex-1 text-sm" style={{ fontWeight: 500 }}>{r.title}</span>
            <StatusPill status={r.status} />
          </div>
        ))}
      </div>
    </div>
  </div>
);

const ProjectTimeline = ({ progress, deadline }) => (
  <div className="relative py-2">
    <div style={{ position: "absolute", left: 0, right: 0, top: 22, height: 2, background: "var(--wood-border)", borderRadius: 2 }} />
    <div style={{ position: "absolute", left: 0, top: 22, height: 2, width: `${progress}%`, background: "linear-gradient(90deg, var(--wood-light), var(--amber-bright))", borderRadius: 2, boxShadow: "0 0 8px rgba(16, 185, 129,0.4)" }} />
    <div className="flex justify-between relative">
      {[
        { label: "Início", pct: 0 },
        { label: "Análise", pct: 20 },
        { label: "Produção", pct: 50 },
        { label: "Montagem", pct: 80 },
        { label: "Entrega", pct: 100 },
      ].map(m => {
        const done = progress >= m.pct;
        return (
          <div key={m.label} className="flex flex-col items-center" style={{ width: 60 }}>
            <div style={{
              width: 12, height: 12, borderRadius: "50%",
              background: done ? "var(--amber-bright)" : "var(--wood-surface-2)",
              border: `2px solid ${done ? "var(--amber-bright)" : "var(--wood-border)"}`,
              boxShadow: done ? "0 0 8px var(--amber)" : "none",
              marginTop: 16, marginBottom: 8
            }} />
            <div className="text-xs text-3" style={{ textAlign: "center", fontWeight: done ? 600 : 400, color: done ? "var(--text-2)" : "var(--text-4)" }}>{m.label}</div>
          </div>
        );
      })}
    </div>
  </div>
);

/* ============================================================
   TEAMS (Equipes)
   ============================================================ */
const TeamsPage = ({ navigate }) => {
  const [drawer, setDrawer] = useStateOp(null);
  return (
    <>
      <PageHeader
        kicker="Produção"
        title="Equipes"
        subtitle="Quem está trabalhando em quê. Carga visível, liderança clara, ação rápida."
        actions={<button className="wood-btn wood-btn-primary"><Icon name="plus" size={13} /> Nova equipe</button>}
      />

      <div className="grid grid-cols-2 gap-4">
        {MOCK.teams.map((t, i) => (
          <div key={t.id} className="wood-card wood-card-hover p-5 slide-up" style={{ animationDelay: `${i * 60}ms` }} onClick={() => setDrawer(t)}>
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <Avatar name={t.leader} size={44} />
                <div>
                  <div className="text-lg font-semibold tracking-tight">{t.name}</div>
                  <div className="text-sm text-3">{t.role}</div>
                </div>
              </div>
              <StatusPill status="ativo" />
            </div>

            <div className="grid grid-cols-3 gap-2 mb-4">
              <div className="px-3 py-2 rounded-md" style={{ background: "rgba(0,0,0,0.18)" }}>
                <div className="text-xs text-4">Líder</div>
                <div className="text-sm" style={{ fontWeight: 500 }}>{t.leader.split(" ")[0]}</div>
              </div>
              <div className="px-3 py-2 rounded-md" style={{ background: "rgba(0,0,0,0.18)" }}>
                <div className="text-xs text-4">Membros</div>
                <div className="text-sm font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{t.members}</div>
              </div>
              <div className="px-3 py-2 rounded-md" style={{ background: "rgba(0,0,0,0.18)" }}>
                <div className="text-xs text-4">Obras</div>
                <div className="text-sm font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{t.activeProjects}</div>
              </div>
            </div>

            <div className="mb-3">
              <div className="flex items-center justify-between mb-1.5">
                <div className="text-xs text-3">Carga atual</div>
                <div className="text-sm font-semibold" style={{
                  fontVariantNumeric: "tabular-nums",
                  color: t.load > 80 ? "var(--warning)" : t.load > 60 ? "var(--amber-bright)" : "var(--success)"
                }}>{t.load}%</div>
              </div>
              <AnimatedProgress value={t.load} max={100} height={5} color={t.load > 80 ? "linear-gradient(90deg, #F59E0B, #EF4444)" : t.load < 50 ? "linear-gradient(90deg, #34D399, #10B981)" : undefined} />
            </div>

            <div className="flex items-center pt-3 border-t" style={{ borderColor: "var(--wood-border-soft)" }}>
              <div className="flex" style={{ marginLeft: 0 }}>
                {t.avatars.slice(0, 5).map((a, j) => (
                  <span key={j} style={{ marginLeft: j === 0 ? 0 : -8, position: "relative", zIndex: 5 - j }}>
                    <Avatar name={a} size={28} />
                  </span>
                ))}
                {t.members > 5 && (
                  <span className="wood-avatar text-xs" style={{ marginLeft: -8, width: 28, height: 28, background: "var(--wood-surface-2)", color: "var(--text-3)", fontWeight: 600 }}>
                    +{t.members - 5}
                  </span>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.name}
        subtitle={drawer?.id}
      >
        {drawer && (
          <div>
            <div className="flex items-center gap-3 mb-5">
              <Avatar name={drawer.leader} size={56} />
              <div>
                <div className="text-xs text-3 uppercase tracking-widest">Líder do time</div>
                <div className="text-lg font-semibold">{drawer.leader}</div>
                <div className="text-sm text-3">{drawer.role}</div>
              </div>
            </div>
            <div className="text-sm font-semibold mb-3">Membros ({drawer.members})</div>
            <div className="grid grid-cols-1 gap-2">
              {drawer.avatars.map(name => (
                <div key={name} className="flex items-center gap-3 px-3 py-2.5 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
                  <Avatar name={name} size={32} />
                  <div className="flex-1">
                    <div className="text-sm" style={{ fontWeight: 500 }}>{name}</div>
                    <div className="text-xs text-3">Marceneiro</div>
                  </div>
                  <StatusPill status="ativo" />
                </div>
              ))}
            </div>
          </div>
        )}
      </PremiumDrawer>
    </>
  );
};

Object.assign(window, { RequestsPage, NewRequestPage, ProjectsPage, TeamsPage });