// Cobros page: tabs + table

const PaymentsTable = ({ filter }) => {
  const all = [
    { name: "María Beltrán",   email: "maria.b@gmail.com",     amount: 89.00, method: "Tarjeta",       date: "08/05/26", status: "success", concept: "Mensual · Guitarra" },
    { name: "Javier Olmedo",   email: "j.olmedo@outlook.com",  amount: 65.00, method: "Tarjeta",       date: "08/05/26", status: "success", concept: "Mensual · Solfeo" },
    { name: "Lucía Romero",    email: "lucia@romero.es",       amount: 240.00,method: "Transferencia", date: "07/05/26", status: "pending", concept: "Trimestral · Piano" },
    { name: "Alba Ferreira",   email: "alba.f@hotmail.com",    amount: 55.00, method: "Tarjeta",       date: "07/05/26", status: "success", concept: "Mensual · Coro" },
    { name: "Pablo Cifuentes", email: "pablo.c@yahoo.es",      amount: 65.00, method: "Tarjeta",       date: "06/05/26", status: "failed",  concept: "Mensual · Solfeo" },
    { name: "Carmen Iglesias", email: "carmen.i@gmail.com",    amount: 89.00, method: "Tarjeta",       date: "06/05/26", status: "success", concept: "Mensual · Guitarra" },
    { name: "Tomás Vidal",     email: "tomas.vidal@gmail.com", amount: 110.00,method: "Transferencia", date: "05/05/26", status: "success", concept: "Mensual · Piano" },
    { name: "Inés Madroñal",   email: "ines.m@gmail.com",      amount: 65.00, method: "Tarjeta",       date: "05/05/26", status: "pending", concept: "Mensual · Solfeo" },
    { name: "Diego Saldaña",   email: "diego.s@gmail.com",     amount: 89.00, method: "Tarjeta",       date: "04/05/26", status: "success", concept: "Mensual · Guitarra" },
  ];
  const tones = { success: "success", pending: "warning", failed: "danger" };
  const labels = { success: "Cobrado", pending: "Pendiente", failed: "Fallido" };
  const rows = filter === "all" ? all : all.filter(r => r.status === filter);
  const fmt = n => n.toFixed(2).replace(".", ",") + " €";
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <table className="tbl">
        <thead>
          <tr>
            <th>Cliente</th>
            <th>Concepto</th>
            <th>Método</th>
            <th>Fecha</th>
            <th className="num">Importe</th>
            <th>Estado</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td>
                <div className="who">
                  <Avatar name={r.name} size={28}/>
                  <div>
                    <b>{r.name}</b>
                    <div style={{ fontSize: 11, color: "var(--fg-3)" }}>{r.email}</div>
                  </div>
                </div>
              </td>
              <td style={{ color: "var(--fg-2)" }}>{r.concept}</td>
              <td style={{ color: "var(--fg-2)" }}>{r.method}</td>
              <td style={{ color: "var(--fg-3)", fontVariantNumeric: "tabular-nums" }}>{r.date}</td>
              <td className="num">{fmt(r.amount)}</td>
              <td><Pill tone={tones[r.status]}>{labels[r.status]}</Pill></td>
              <td><button className="icon-btn" style={{ width: 28, height: 28 }}>{Icons.Dots}</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

const CobrosPage = () => {
  const [filter, setFilter] = React.useState("all");
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs" style={{ color: "var(--fg-3)", fontSize: 13 }}>Cobros</div>
          <h1>Movimientos</h1>
          <p className="lede">9 cobros este mes · 7.022 € procesados</p>
        </div>
        <div className="actions">
          <Btn variant="secondary" icon={Icons.Filter}>Filtros</Btn>
          <Btn variant="primary" icon={Icons.Plus}>Nuevo cobro</Btn>
        </div>
      </div>

      <div style={{ display: "flex", gap: 12, marginBottom: 16, alignItems: "center" }}>
        <div className="tabs">
          {[
            { k: "all",     l: "Todos" },
            { k: "success", l: "Cobrados" },
            { k: "pending", l: "Pendientes" },
            { k: "failed",  l: "Fallidos" },
          ].map(t => (
            <button key={t.k}
                    className={`tab ${filter === t.k ? "active" : ""}`}
                    onClick={() => setFilter(t.k)}>
              {t.l}
            </button>
          ))}
        </div>
      </div>

      <PaymentsTable filter={filter}/>
    </div>
  );
};

Object.assign(window, { CobrosPage });