'use client';
import { Suspense, useState, useTransition } from 'react';
import { useSearchParams } from 'next/navigation';
import { Icon } from '@/lib/icons';
import { AdImage } from '@/components/AdImage';
import type { Listing } from '@/lib/data';
import { useGo } from '@/lib/router';
import { useAuth } from '@/components/AuthProvider';
import { createReservation } from '@/lib/actions';

function BookingScreen({ d }: { d: Listing }) {
  const { go } = useGo();
  const { user } = useAuth();
  const sp = useSearchParams();
  const [step, setStep] = useState(0);
  const [covers, setCovers] = useState(Number(sp?.get('covers')) || 2);
  const [day, setDay] = useState(Number(sp?.get('day')) || 0);
  const [slot, setSlot] = useState('20:00');
  const [form, setForm] = useState({ first: '', last: '', phone: '', email: '', note: '' });
  const [ref, setRef] = useState('DSK-' + (4820 + d.id));
  const [pending, startTransition] = useTransition();
  const days = ['Aujourd’hui', 'Demain', 'Jeudi', 'Vendredi', 'Samedi'];
  const slots = ['12:30', '13:00', '13:30', '19:30', '20:00', '20:30', '21:00', '21:30'];
  const set = (k: keyof typeof form, v: string) => setForm((f) => ({ ...f, [k]: v }));

  const confirmReservation = () => {
    if (!user) {
      go('auth', { mode: 'login' });
      return;
    }
    startTransition(async () => {
      const r = await createReservation({ bizId: d.id, day, slot, covers });
      if (r.ok && r.ref) setRef(r.ref);
      setStep(3);
    });
  };

  const summary = (
    <div className="panel" style={{ padding: 18 }}>
      <div className="row gap12">
        <div style={{ width: 64, flexShrink: 0 }}><AdImage biz photos={d.photos} cat={d.cat} h={64} radius={12} idx={0} /></div>
        <div>
          <div className="h4">{d.name}</div>
          <div className="small row gap8" style={{ marginTop: 3 }}>
            <Icon name="pin" size={13} stroke={1.8} />
            <span>{d.area}, {d.city}</span>
          </div>
        </div>
      </div>
      <div style={{ height: 1, background: 'var(--line2)', margin: '16px 0' }}></div>
      {(
        [
          ['calendar', days[day] + ' · ' + (12 + day) + ' mai', 'Date'],
          ['clock', slot, 'Heure'],
          ['users', covers + ' personne' + (covers > 1 ? 's' : ''), 'Couverts'],
        ] as const
      ).map((r, i) => (
        <div key={i} className="between" style={{ padding: '6px 0' }}>
          <span className="small row gap8">
            <Icon name={r[0]} size={15} stroke={1.8} />{r[2]}
          </span>
          <span style={{ fontWeight: 600, fontSize: 14 }}>{r[1]}</span>
        </div>
      ))}
    </div>
  );

  if (step === 3) {
    return (
      <div className="wrap booking-wrap" style={{ paddingTop: 60, paddingBottom: 60, textAlign: 'center' }}>
        <div
          style={{
            width: 76,
            height: 76,
            borderRadius: 999,
            background: 'var(--teal-tint)',
            color: 'var(--teal)',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Icon name="checkCircle" size={42} stroke={1.8} />
        </div>
        <h1 className="h1" style={{ fontSize: 36, marginTop: 22 }}>Réservation confirmée !</h1>
        <p className="lead" style={{ marginTop: 10 }}>
          Un SMS de confirmation a été envoyé{form.phone ? ' au ' + form.phone : ''}. {d.name} vous attend.
        </p>
        <div style={{ maxWidth: 440, margin: '28px auto 0', textAlign: 'left' }}>{summary}</div>
        <div
          className="panel"
          style={{ maxWidth: 440, margin: '14px auto 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
        >
          <div>
            <div className="tiny">Référence</div>
            <div className="h4 tnum">{ref}</div>
          </div>
          <Icon name="qr" size={44} stroke={1.6} style={{ color: 'var(--ink)' }} />
        </div>
        <div className="row gap12" style={{ justifyContent: 'center', marginTop: 24 }}>
          <button className="btn btn-ghost" onClick={() => go('home')}>Retour à l’accueil</button>
          <button className="btn btn-red" onClick={() => go('detail', { id: d.id })}>Voir l’adresse</button>
        </div>
      </div>
    );
  }

  return (
    <div className="wrap booking-wrap" style={{ paddingTop: 24, paddingBottom: 50 }}>
      <button
        className="row gap8"
        style={{ fontWeight: 600, fontSize: 14, color: 'var(--sub)' }}
        onClick={() => (step === 0 ? go('detail', { id: d.id }) : setStep(step - 1))}
      >
        <Icon name="arrowLeft" size={17} stroke={2} />Retour
      </button>
      <h1 className="h1" style={{ fontSize: 32, marginTop: 16 }}>Réserver chez {d.name}</h1>
      <div className="stepper">{[0, 1, 2].map((i) => <div key={i} className={'sd ' + (i <= step ? 'on' : '')}></div>)}</div>
      <div className="small" style={{ marginBottom: 20 }}>
        Étape {step + 1} sur 3 — {['Date & heure', 'Vos informations', 'Récapitulatif'][step]}
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1fr', gap: 24 }}>
        {step === 0 && (
          <div className="panel" style={{ padding: 24 }}>
            <div className="label" style={{ marginBottom: 10 }}>Quel jour ?</div>
            <div className="row gap8" style={{ overflowX: 'auto', paddingBottom: 4 }}>
              {days.map((dd, i) => (
                <div key={i} className={'daypick ' + (day === i ? 'on' : '')} onClick={() => setDay(i)} style={{ minWidth: 92 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: day === i ? 'var(--red-dark)' : 'var(--ink)' }}>{dd}</div>
                  <div className="tiny">{12 + i} mai</div>
                </div>
              ))}
            </div>
            <div className="label" style={{ margin: '22px 0 10px' }}>Couverts</div>
            <div className="between" style={{ maxWidth: 260 }}>
              <span className="row gap8">
                <Icon name="users" size={18} stroke={1.8} style={{ color: 'var(--muted)' }} />
                <span>{covers} personne{covers > 1 ? 's' : ''}</span>
              </span>
              <div className="counter">
                <button onClick={() => setCovers(Math.max(1, covers - 1))}><Icon name="minus" size={16} /></button>
                <button onClick={() => setCovers(Math.min(12, covers + 1))}><Icon name="plus" size={16} /></button>
              </div>
            </div>
            <div className="label" style={{ margin: '22px 0 10px' }}>Heure disponible</div>
            <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {slots.map((s) => (
                <div key={s} className={'timeslot ' + (slot === s ? 'on' : '')} onClick={() => setSlot(s)}>{s}</div>
              ))}
            </div>
            <button className="btn btn-red btn-block btn-lg" style={{ marginTop: 24 }} onClick={() => setStep(1)}>
              Continuer<Icon name="arrowRight" size={17} stroke={2} />
            </button>
          </div>
        )}

        {step === 1 && (
          <div className="panel" style={{ padding: 24 }}>
            <div className="grid cols-2" style={{ gap: 14 }}>
              <div className="field">
                <span className="label">Prénom</span>
                <div className="input"><input value={form.first} onChange={(e) => set('first', e.target.value)} placeholder="Votre prénom" /></div>
              </div>
              <div className="field">
                <span className="label">Nom</span>
                <div className="input"><input value={form.last} onChange={(e) => set('last', e.target.value)} placeholder="Votre nom" /></div>
              </div>
            </div>
            <div className="field" style={{ marginTop: 14 }}>
              <span className="label">Téléphone</span>
              <div className="input">
                <Icon name="phone" size={17} />
                <input value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="+213 6 .. .. .. .." />
              </div>
            </div>
            <div className="field" style={{ marginTop: 14 }}>
              <span className="label">E-mail (facultatif)</span>
              <div className="input">
                <Icon name="mail" size={17} />
                <input value={form.email} onChange={(e) => set('email', e.target.value)} placeholder="vous@email.com" />
              </div>
            </div>
            <div className="field" style={{ marginTop: 14 }}>
              <span className="label">Note pour l’établissement (facultatif)</span>
              <div className="input" style={{ alignItems: 'flex-start' }}>
                <textarea
                  value={form.note}
                  onChange={(e) => set('note', e.target.value)}
                  placeholder="Allergie, occasion spéciale, demande…"
                  rows={3}
                  style={{ border: 'none', outline: 'none', background: 'none', resize: 'vertical', width: '100%', fontSize: 14.5 }}
                />
              </div>
            </div>
            <button className="btn btn-red btn-block btn-lg" style={{ marginTop: 22 }} onClick={() => setStep(2)}>
              Continuer<Icon name="arrowRight" size={17} stroke={2} />
            </button>
          </div>
        )}

        {step === 2 && (
          <div>
            {summary}
            <div className="panel" style={{ padding: 18, marginTop: 14 }}>
              <div className="h4">Vos informations</div>
              <div className="small" style={{ marginTop: 8, lineHeight: 1.7 }}>
                {(form.first || form.last) ? `${form.first} ${form.last}` : 'Invité Darsouk'}<br />
                {form.phone || '+213 6 .. .. .. ..'}{form.email ? ' · ' + form.email : ''}
                {form.note && <><br /><span style={{ fontStyle: 'italic' }}>« {form.note} »</span></>}
              </div>
            </div>
            <div className="row gap8" style={{ marginTop: 16, alignItems: 'flex-start' }}>
              <Icon name="info" size={16} style={{ color: 'var(--muted)', marginTop: 2, flexShrink: 0 }} />
              <span className="tiny">
                En confirmant, vous acceptez la politique d’annulation gratuite jusqu’à 2h avant l’horaire réservé.
              </span>
            </div>
            <button
              className="btn btn-red btn-block btn-lg"
              style={{ marginTop: 18, ...(pending ? { opacity: 0.7 } : {}) }}
              disabled={pending}
              onClick={confirmReservation}
            >
              <Icon name="checkCircle" size={18} stroke={2} />
              {!user ? 'Se connecter pour réserver' : pending ? 'Confirmation…' : 'Confirmer la réservation'}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export function BookingClient({ d }: { d: Listing }) {
  return (
    <Suspense fallback={null}>
      <BookingScreen d={d} />
    </Suspense>
  );
}