const { SectionHeading, Card, Input, Select, Checkbox, Switch, Button, Icon, Badge, Dialog, Toast } = window.VeterinariaSanPatricioDesignSystem_c9a149;

const SLOTS = ['09:00', '09:30', '10:30', '11:00', '15:30', '16:00', '17:30', '18:30'];
const DAYS = [{ d: 'Mar', n: 12 }, { d: 'Mié', n: 13 }, { d: 'Jue', n: 14 }, { d: 'Vie', n: 15 }, { d: 'Sáb', n: 16 }];

function BookingScreen({ booking, setBooking, go }) {
  const [day, setDay] = React.useState(12);
  const [slot, setSlot] = React.useState(null);
  const [confirm, setConfirm] = React.useState(false);
  const [done, setDone] = React.useState(!!booking);

  return (
    <main style={{ padding: 'var(--section-y) var(--space-8)', position: 'relative', background: 'var(--surface-sunken)' }}>
      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto' }}>
        <SectionHeading eyebrow="Turnos" title="Reservá en dos pasos." lead="Elegí día y horario, dejanos los datos de tu mascota y te confirmamos por WhatsApp." />

        {done && (
          <div style={{ marginTop: 'var(--space-8)' }}>
            <Toast tone="success" title="Turno reservado" message={booking} icon={<Icon name="check" size={15} />} onClose={() => { setDone(false); setBooking(null); }} />
          </div>
        )}

        <Card style={{ marginTop: 'var(--space-8)' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-700)' }}>1 · Día y horario</div>
          <div className="vsp-days" style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-5)' }}>
            {DAYS.map((x) => (
              <button key={x.n} onClick={() => setDay(x.n)} style={{
                flex: 1, padding: '14px 0', borderRadius: 'var(--radius-md)', cursor: 'pointer',
                border: '2px solid ' + (day === x.n ? 'var(--brand)' : 'var(--border-default)'),
                background: day === x.n ? 'var(--green-50)' : '#fff', fontFamily: 'var(--font-ui)',
              }}>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', fontWeight: 600 }}>{x.d}</div>
                <div style={{ fontSize: 'var(--text-h4)', fontWeight: 800, color: day === x.n ? 'var(--green-700)' : 'var(--text-strong)' }}>{x.n}</div>
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginTop: 'var(--space-5)' }}>
            {SLOTS.map((s) => (
              <button key={s} onClick={() => setSlot(s)} style={{
                padding: '10px 18px', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
                border: '2px solid ' + (slot === s ? 'var(--brand)' : 'var(--border-subtle)'),
                background: slot === s ? 'var(--brand)' : '#fff', color: slot === s ? '#fff' : 'var(--text-body)',
                fontFamily: 'var(--font-ui)', fontSize: 'var(--text-sm)', fontWeight: 700,
              }}>{s}</button>
            ))}
          </div>
        </Card>

        <Card style={{ marginTop: 'var(--space-6)' }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--green-700)' }}>2 · Tu mascota</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)', marginTop: 'var(--space-5)' }}>
            <Input label="Nombre de tu mascota" placeholder="Ej. Rufo" icon={<Icon name="dog" size={18} />} />
            <Select label="Servicio" options={[{ value: 'v', label: 'Vacunatorio' }, { value: 'c', label: 'Consulta clínica' }, { value: 'p', label: 'Peluquería' }, { value: 'e', label: 'Estudios complementarios' }]} />
            <Input label="Tu nombre" placeholder="Ej. Julieta" icon={<Icon name="user" size={18} />} />
            <Input label="WhatsApp" placeholder="261 000-0000" icon={<Icon name="phone" size={18} />} hint="Te confirmamos por este medio." />
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-8)', marginTop: 'var(--space-6)' }}>
            <Checkbox label="Es la primera consulta" />
            <Switch label="Quiero recordatorio de vacunas" defaultChecked />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-6)', marginTop: 'var(--space-8)' }}>
            <div style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)' }}>
              {slot ? <>Seleccionaste <strong style={{ color: 'var(--text-strong)' }}>{day}/08 · {slot} h</strong></> : 'Elegí un horario para continuar.'}
            </div>
            <Button size="lg" disabled={!slot} onClick={() => setConfirm(true)}>Confirmar turno</Button>
          </div>
        </Card>
      </div>

      <Dialog open={confirm} width={420} title="Confirmar turno"
        description={slot ? `Martes ${day} de agosto a las ${slot} h en Los Fresnos, Manzana 19 Casa 31, Las Heras.` : ''}
        onClose={() => setConfirm(false)}
        footer={<>
          <Button variant="ghost" onClick={() => setConfirm(false)}>Volver</Button>
          <Button onClick={() => { setBooking(`${day}/08 · ${slot} h — te escribimos por WhatsApp.`); setDone(true); setConfirm(false); }}>Confirmar</Button>
        </>} />
    </main>
  );
}