// Clientes page: split list + detail

const CLIENTES = [
  { id: "maria",  name: "María Beltrán",   plan: "Mensual · Guitarra",  status: "success", since: "Sep 2024", last: "08/05/26", phone: "+34 654 32 11 09", email: "maria.b@gmail.com" },
  { id: "javier", name: "Javier Olmedo",   plan: "Mensual · Solfeo",    status: "success", since: "Ene 2025", last: "08/05/26", phone: "+34 612 88 02 14", email: "j.olmedo@outlook.com" },
  { id: "lucia",  name: "Lucía Romero",    plan: "Trimestral · Piano",  status: "warning", since: "Mar 2024", last: "07/05/26", phone: "+34 678 45 11 22", email: "lucia@romero.es" },
  { id: "alba",   name: "Alba Ferreira",   plan: "Mensual · Coro",      status: "success", since: "Oct 2025", last: "07/05/26", phone: "+34 690 30 02 55", email: "alba.f@hotmail.com" },
  { id: "pablo",  name: "Pablo Cifuentes", plan: "Mensual · Solfeo",    status: "danger",  since: "Feb 2025", last: "06/05/26", phone: "+34 644 18 33 71", email: "pablo.c@yahoo.es" },
  { id: "carmen", name: "Carmen Iglesias", plan: "Mensual · Guitarra",  status: "success", since: "Nov 2024", last: "06/05/26", phone: "+34 627 09 41 03", email: "carmen.i@gmail.com" },
  { id: "tomas",  name: "Tomás Vidal",     plan: "Mensual · Piano",     status: "success", since: "Jul 2024", last: "05/05/26", phone: "+34 666 55 22 18", email: "tomas.vidal@gmail.com" },
];

const labels = { success: "Activo", warning: "Pendiente", danger: "Cobro fallido" };

const ClientesPage = () => {
  const [selected, setSelected] = React.useState(CLIENTES[0].id);
  const c = CLIENTES.find(x => x.id === selected);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Clientes</h1>
          <p className="lede">152 activos · 8 pendientes · 3 con cobro fallido</p>
        </div>
        <div className="actions">
          <Btn variant="secondary" icon={Icons.Filter}>Filtros</Btn>
          <Btn variant="primary" icon={Icons.Plus}>Añadir cliente</Btn>
        </div>
      </div>

      <div className="split">
        <div className="list-card">
          <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 8 }}>
            {Icons.Search}
            <input placeholder="Buscar…" style={{
              flex: 1, background: "none", border: "none", outline: "none",
              color: "var(--fg-1)", fontFamily: "inherit", fontSize: 13
            }}/>
          </div>
          {CLIENTES.map(cl => (
            <div key={cl.id}
                 className={`list-row ${cl.id === selected ? "selected" : ""}`}
                 onClick={() => setSelected(cl.id)}>
              <Avatar name={cl.name} size={34}/>
              <div className="meta">
                <b>{cl.name}</b>
                <span>{cl.plan}</span>
              </div>
              <Pill tone={cl.status}>{labels[cl.status]}</Pill>
            </div>
          ))}
        </div>

        <div className="detail">
          <div className="detail-head">
            <Avatar name={c.name} size={56}/>
            <div className="who">
              <h2>{c.name}</h2>
              <div className="meta">{c.plan} · cliente desde {c.since}</div>
            </div>
            <div className="actions">
              <Btn variant="secondary" icon={Icons.Mail}>Mensaje</Btn>
              <Btn variant="primary" icon={Icons.Coin}>Cobrar ahora</Btn>
            </div>
          </div>

          <div className="kv-grid">
            <div className="kv"><div className="k">Estado</div><div className="v"><Pill tone={c.status}>{labels[c.status]}</Pill></div></div>
            <div className="kv"><div className="k">Plan</div><div className="v">{c.plan}</div></div>
            <div className="kv"><div className="k">Cuota</div><div className="v">89,00 € / mes</div></div>
            <div className="kv"><div className="k">Email</div><div className="v" style={{ fontSize: 13 }}>{c.email}</div></div>
            <div className="kv"><div className="k">Teléfono</div><div className="v" style={{ fontSize: 13 }}>{c.phone}</div></div>
            <div className="kv"><div className="k">Último cobro</div><div className="v">{c.last}</div></div>
          </div>

          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14,
            letterSpacing: "-0.015em", margin: "0 0 14px"
          }}>Ciclo del cliente</h3>
          <div className="timeline">
            <div className="ev success">
              <div className="bullet">{Icons.Check}</div>
              <div className="body">
                <div className="title">Cobro mensual procesado · 89,00 €</div>
                <div className="when">8 may 2026 · 09:14 · tarjeta •••• 4421</div>
              </div>
            </div>
            <div className="ev success">
              <div className="bullet">{Icons.Check}</div>
              <div className="body">
                <div className="title">Asistencia confirmada · clase del jueves</div>
                <div className="when">7 may 2026 · 18:32</div>
              </div>
            </div>
            <div className="ev">
              <div className="bullet">{Icons.Mail}</div>
              <div className="body">
                <div className="title">Recordatorio enviado · «Tu próxima clase es mañana»</div>
                <div className="when">6 may 2026 · 19:00 · WhatsApp</div>
              </div>
            </div>
            <div className="ev success">
              <div className="bullet">{Icons.Check}</div>
              <div className="body">
                <div className="title">Cobro mensual procesado · 89,00 €</div>
                <div className="when">8 abr 2026 · 09:14 · tarjeta •••• 4421</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ClientesPage });