/* eslint-disable */
const { useState: useStateD } = React;

/* ---------- KPI ---------- */
function KpiCard({ eyebrow, value, valueSub, delta, deltaTone, deltaArrow, icon }) {
  // deltaTone: 'up' | 'down' | 'neutral'
  const toneClass = deltaTone === 'down' ? 'is-down' : deltaTone === 'neutral' ? 'is-neutral' : 'is-up';
  return (
    <div className="mp-kpi">
      <div className="mp-kpi__head">
        <span className="mp-eyebrow-teal">{eyebrow}</span>
        {icon && (
          <span className="mp-kpi__icon"><i data-lucide={icon}></i></span>
        )}
      </div>
      <div className="mp-kpi__value">
        {value}
        {valueSub && <span className="mp-kpi__value-sub"> {valueSub}</span>}
      </div>
      {delta && (
        <div className={`mp-kpi__delta ${toneClass}`}>
          {deltaArrow && <span className="mp-kpi__delta-arrow">{deltaArrow}</span>}
          <span>{delta}</span>
        </div>
      )}
    </div>
  );
}

/* ---------- Kanban ---------- */
function ProductionKanban() {
  const cols = [
    { key: 'bancada', title: 'Bancada', items: [
      { id: 'P-0142', title: 'Cozinha Carvalho', due: 'entrega hoje',  owner: 'J', urgent: true },
      { id: 'P-0139', title: 'Armário Salles',   due: 'amanhã',        owner: 'L' },
    ]},
    { key: 'pintura', title: 'Pintura e acabamento', items: [
      { id: 'P-0133', title: 'Estante modular',  due: '02/05',          owner: 'T' },
    ]},
    { key: 'entrega', title: 'Pronto para entrega', items: [
      { id: 'P-0128', title: 'Rack sala Pires',  due: '29/04',          owner: 'J' },
      { id: 'P-0126', title: 'Mesa 8 lugares',   due: '29/04',          owner: 'L' },
    ]},
  ];
  return (
    <div className="mp-card">
      <div className="mp-card__head">
        <div>
          <div className="mp-card__title">Produção desta semana</div>
          <div className="mp-card__sub">Projetos ativos na oficina</div>
        </div>
        <button className="mp-btn mp-btn--ghost">
          Ver quadro completo
          <i data-lucide="arrow-right"></i>
        </button>
      </div>
      <div className="mp-kanban">
        {cols.map(c => (
          <div key={c.key} className="mp-kanban__col">
            <div className="mp-kanban__title">
              <span>{c.title}</span>
              <span className="mp-kanban__count">{c.items.length}</span>
            </div>
            {c.items.map(it => (
              <div key={it.id} className="mp-kanban__card">
                <div className="mp-kanban__card-head">
                  <span className="mp-kanban__code">{it.id}</span>
                  {it.urgent && <span className="mp-urgency-dot" aria-label="Entrega urgente"></span>}
                </div>
                <div className="mp-kanban__name">{it.title}</div>
                <div className="mp-kanban__meta">
                  <span className={`mp-kanban__due ${it.urgent ? 'is-urgent' : ''}`}>
                    <i data-lucide="calendar"></i>{it.due}
                  </span>
                  <span className="mp-avatar mp-avatar--xs">{it.owner}</span>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Quotes Table ---------- */
function StatusBadge({ status }) {
  const map = {
    enviado:    { cls: 'info',    label: 'Enviado' },
    aprovado:   { cls: 'success', label: 'Aprovado' },
    producao:   { cls: 'teal',    label: 'Em produção' },
    aguardando: { cls: 'warn',    label: 'Aguardando' },
    rascunho:   { cls: 'warn',    label: 'Rascunho' },
  };
  const m = map[status] || map.rascunho;
  return (
    <span className={`mp-badge mp-badge--${m.cls}`}>
      <span className="mp-badge__dot"></span>{m.label}
    </span>
  );
}

function QuotesTable() {
  const [filter, setFilter] = useStateD('todos');
  const filters = [
    { id: 'todos',      label: 'Todos' },
    { id: 'enviados',   label: 'Enviados' },
    { id: 'aprovados',  label: 'Aprovados' },
    { id: 'rascunhos',  label: 'Rascunhos' },
  ];
  const all = [
    { id: 'ORC-2026-0142', client: 'Móveis Carvalho Ltda',  value: 'R$ 12.480,00', status: 'enviado',    updated: 'hoje, 10:12' },
    { id: 'ORC-2026-0141', client: 'Eduarda Salles',        value: 'R$ 3.200,00',  status: 'aprovado',   updated: 'ontem' },
    { id: 'ORC-2026-0140', client: 'Construtora Pires',     value: 'R$ 28.900,00', status: 'producao',   updated: 'há 2 dias' },
    { id: 'ORC-2026-0139', client: 'Juliana Tavares',       value: 'R$ 4.780,00',  status: 'aguardando', updated: 'há 3 dias' },
  ];
  const quotes = filter === 'todos' ? all
    : filter === 'enviados'  ? all.filter(q => q.status === 'enviado')
    : filter === 'aprovados' ? all.filter(q => q.status === 'aprovado')
    : all.filter(q => q.status === 'rascunho' || q.status === 'aguardando');

  return (
    <div className="mp-card">
      <div className="mp-card__head">
        <div>
          <div className="mp-card__title">Orçamentos recentes</div>
          <div className="mp-card__sub">14 orçamentos nos últimos 30 dias</div>
        </div>
        <div className="mp-filters">
          {filters.map(f => (
            <button
              key={f.id}
              className={`mp-chip ${filter === f.id ? 'is-active' : ''}`}
              onClick={() => setFilter(f.id)}>
              {f.label}
            </button>
          ))}
        </div>
      </div>
      <table className="mp-table">
        <thead>
          <tr>
            <th style={{width: 170}}>Código</th>
            <th>Cliente</th>
            <th className="mp-th-right" style={{width: 140}}>Valor</th>
            <th style={{width: 160}}>Status</th>
            <th style={{width: 140}}>Atualizado</th>
            <th style={{width: 32}}></th>
          </tr>
        </thead>
        <tbody>
          {quotes.map(q => (
            <tr key={q.id}>
              <td><span className="mp-mono">{q.id}</span></td>
              <td><span className="mp-client-cell">{q.client}</span></td>
              <td><div className="mp-money">{q.value}</div></td>
              <td><StatusBadge status={q.status} /></td>
              <td className="mp-muted">{q.updated}</td>
              <td className="mp-row-action"><i data-lucide="chevron-right"></i></td>
            </tr>
          ))}
          {quotes.length === 0 && (
            <tr>
              <td colSpan={6} style={{textAlign: 'center', color: '#8C8C8C', padding: '28px 12px'}}>
                Nenhum orçamento neste filtro.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

/* ---------- Dashboard composition ---------- */
function Dashboard() {
  return (
    <React.Fragment>
      <div className="mp-kpi-grid">
        <KpiCard
          eyebrow="Faturamento do mês"
          value="R$ 48.930"
          delta="+12% vs. março"
          deltaTone="up" deltaArrow="↑"
          icon="circle-dollar-sign"
        />
        <KpiCard
          eyebrow="Orçamentos abertos"
          value="14"
          delta="+3 esta semana"
          deltaTone="up" deltaArrow="↑"
          icon="file-text"
        />
        <KpiCard
          eyebrow="Em produção"
          value="5"
          valueSub="obras"
          delta="1 atrasada"
          deltaTone="down" deltaArrow="↓"
          icon="hammer"
        />
        <KpiCard
          eyebrow="Entregas previstas"
          value="3"
          delta="nos próximos 7 dias"
          deltaTone="neutral"
          icon="truck"
        />
      </div>
      <ProductionKanban />
      <QuotesTable />
    </React.Fragment>
  );
}

window.Dashboard = Dashboard;