// ============================================================
// AgenticX — Área do Cliente · páginas autenticadas
// Dashboard, plano e grid de faturas.
// PRD: PRD_AREA_CLIENTE.md
// ============================================================

const formatBRL = (value) => new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
const formatDate = (iso) => (iso ? new Intl.DateTimeFormat('pt-BR').format(new Date(`${iso}T00:00:00`)) : '—');

const FATURA_STATUS = {
  paga:       { label: 'Paga',       cls: 'bg-forest/10 text-forest' },
  em_aberto:  { label: 'Em aberto',  cls: 'bg-teal/10 text-teal' },
  vencida:    { label: 'Vencida',    cls: 'bg-red-50 text-red-700' },
  cancelada:  { label: 'Cancelada',  cls: 'bg-slate/10 text-slate' },
};

const StatusBadge = ({ status }) => {
  const s = FATURA_STATUS[status] || { label: status, cls: 'bg-slate/10 text-slate' };
  return (
    <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${s.cls}`}>
      {s.label}
    </span>
  );
};

const PlanoCard = ({ plano }) => (
  <div className="bg-forest text-white rounded-3xl p-8 sm:p-10 h-fit">
    <Eyebrow className="text-cream">Seu plano</Eyebrow>
    {plano ? (
      <>
        <h3 className="mt-4 text-2xl sm:text-3xl font-medium">{plano.nome}</h3>
        {plano.descricao && <p className="mt-3 text-white/80 text-sm leading-relaxed">{plano.descricao}</p>}
        <div className="mt-6 flex items-baseline gap-2">
          <span className="text-3xl font-medium">{formatBRL(plano.valor_mensal)}</span>
          <span className="text-white/70 text-sm">/mês</span>
        </div>
        {plano.plano_desde && <p className="mt-2 text-xs text-white/60">Cliente desde {formatDate(plano.plano_desde)}</p>}
      </>
    ) : (
      <p className="mt-4 text-white/80 text-sm">Nenhum plano associado à sua conta no momento.</p>
    )}
  </div>
);

const FaturasSkeleton = () => (
  <div className="space-y-3">
    {[1, 2, 3].map((i) => <div key={i} className="h-14 rounded-xl bg-sage/50 animate-pulse"/>)}
  </div>
);

const FaturasGrid = () => {
  const [state, setState] = React.useState({ status: 'loading', items: [] });

  const load = React.useCallback(async () => {
    setState((s) => ({ ...s, status: 'loading' }));
    try {
      const data = await apiFetch('/faturas');
      setState({ status: 'ready', items: data.items });
    } catch (err) {
      setState({ status: 'error', items: [] });
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);

  if (state.status === 'loading') return <FaturasSkeleton/>;

  if (state.status === 'error') {
    return (
      <div className="rounded-xl border border-line p-6 text-center">
        <p className="text-sm text-slate mb-3">Não foi possível carregar suas faturas.</p>
        <button onClick={load} className="text-xs font-semibold text-forest underline underline-offset-4 hover:text-forest-700">
          Tentar novamente
        </button>
      </div>
    );
  }

  if (state.items.length === 0) {
    return <p className="text-sm text-slate">Nenhuma fatura encontrada.</p>;
  }

  return (
    <div className="overflow-x-auto -mx-2">
      <table className="w-full text-sm min-w-[560px]">
        <thead>
          <tr className="text-left text-xs font-medium text-slate uppercase tracking-wide border-b border-line">
            <th className="py-3 px-2">Número</th>
            <th className="py-3 px-2">Competência</th>
            <th className="py-3 px-2">Vencimento</th>
            <th className="py-3 px-2">Valor</th>
            <th className="py-3 px-2">Status</th>
            <th className="py-3 px-2"></th>
          </tr>
        </thead>
        <tbody>
          {state.items.map((f) => (
            <tr key={f.numero} className="border-b border-line last:border-0">
              <td className="py-3 px-2 font-medium text-black">{f.numero}</td>
              <td className="py-3 px-2 text-slate">{formatDate(f.competencia)}</td>
              <td className="py-3 px-2 text-slate">{formatDate(f.vencimento)}</td>
              <td className="py-3 px-2 text-black">{formatBRL(f.valor)}</td>
              <td className="py-3 px-2"><StatusBadge status={f.status}/></td>
              <td className="py-3 px-2">
                {f.url_pdf && (
                  <a href={f.url_pdf} target="_blank" rel="noopener noreferrer"
                    className="text-xs font-semibold text-forest underline underline-offset-4 hover:text-forest-700">
                    PDF
                  </a>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const ClienteDashboard = ({ auth }) => {
  const user = auth.user;
  if (!user) return <ClienteLoadingScreen/>;

  return (
    <section className="py-16 sm:py-20 bg-white min-h-[70vh]">
      <Container>
        <div className="mb-10">
          <Eyebrow>Área do cliente</Eyebrow>
          <h1 className="mt-3 text-3xl sm:text-4xl font-medium text-black">
            Olá, <span className="font-em text-forest">{user.usuario.nome}</span>
          </h1>
          <p className="mt-2 text-slate text-sm">{user.cliente.razao_social}</p>
        </div>

        <div className="grid lg:grid-cols-[2fr_3fr] gap-8">
          <PlanoCard plano={user.plano}/>
          <div className="rounded-2xl border border-line p-6 sm:p-8">
            <h2 className="text-lg font-medium text-black mb-1">Últimas faturas</h2>
            <p className="text-sm text-slate mb-6">Consulte o status e o histórico de cobrança da sua conta.</p>
            <FaturasGrid/>
          </div>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { ClienteDashboard, PlanoCard, FaturasGrid, StatusBadge });