'use client';
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';
import { Icon } from '@/lib/icons';
import { Photo } from '@/components/Photo';
import { CATS } from '@/lib/data';
import { useGo } from '@/lib/router';
import { becomePro } from '@/lib/actions';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button className="btn btn-red btn-block btn-lg" type="submit" disabled={pending} style={pending ? { opacity: 0.7 } : undefined}>
      <Icon name="store" size={18} stroke={2} />
      {pending ? 'Activation…' : 'Activer mon compte Pro'}
    </button>
  );
}

const PERKS: [string, string, string][] = [
  ['chart', 'Tableau de bord', 'Suivez vues, réservations et messages en temps réel.'],
  ['calendar', 'Réservations en ligne', 'Recevez et gérez les demandes de vos clients.'],
  ['message', 'Messagerie directe', 'Échangez avec vos clients depuis votre espace.'],
  ['star', 'Avis & réputation', 'Répondez aux avis et renforcez votre image.'],
];

export function ProUpsell({ firstName }: { firstName?: string }) {
  const { go } = useGo();
  const [state, action] = useActionState<{ ok?: boolean; error?: string }, FormData>(
    async (_prev, fd) => becomePro(fd),
    {}
  );

  return (
    <div className="wrap" style={{ paddingTop: 24, paddingBottom: 56 }}>
      <div className="between" style={{ marginBottom: 8 }}>
        <img src="/assets/darsouk-logo.png" alt="Darsouk" style={{ height: 26, cursor: 'pointer' }} onClick={() => go('home')} />
        <button className="btn btn-ghost btn-sm" onClick={() => go('home')}>
          <Icon name="arrowLeft" size={15} stroke={2} />Accueil
        </button>
      </div>
      <div className="detail-layout" style={{ alignItems: 'start', marginTop: 16 }}>
        <div>
          <div className="chip chip-sm" style={{ background: 'var(--red-tint)', color: 'var(--red-dark)', border: 'none' }}>
            <Icon name="store" size={14} />Darsouk Pro
          </div>
          <h1 className="h1" style={{ fontSize: 38, marginTop: 16 }}>
            {firstName ? `${firstName}, développez` : 'Développez'} votre commerce avec Darsouk
          </h1>
          <p className="body" style={{ marginTop: 12, maxWidth: 520, fontSize: 16 }}>
            Vous êtes connecté avec un compte <b>particulier</b>. Pour accéder au tableau de bord commerçant —
            réservations, statistiques, messagerie et fiche publique — activez gratuitement votre compte Pro.
          </p>

          <div className="grid cols-2" style={{ gap: 14, marginTop: 28 }}>
            {PERKS.map(([ic, t, d]) => (
              <div className="panel" key={t} style={{ display: 'flex', gap: 12 }}>
                <div className="setrow-ic" style={{ flexShrink: 0 }}><Icon name={ic} size={18} stroke={1.8} /></div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{t}</div>
                  <div className="small" style={{ marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <form className="booking-box" action={action}>
            <div className="ph" style={{ height: 120, borderRadius: 14, padding: 0, overflow: 'hidden', marginBottom: 18 }}>
              <Photo cat="restaurants" h={120} radius={0} idx={0} />
            </div>
            <h3 className="h3" style={{ fontSize: 22 }}>Activer Darsouk Pro</h3>
            <p className="small" style={{ marginTop: 4, marginBottom: 18 }}>Gratuit, en une étape. Vous gardez le même compte.</p>

            <div className="field">
              <span className="label">Nom du commerce</span>
              <div className="input"><Icon name="store" size={16} /><input name="business_name" placeholder="Ex. Dar Yasmine" autoFocus /></div>
            </div>
            <div className="field" style={{ marginTop: 14 }}>
              <span className="label">Catégorie</span>
              <div className="input">
                <Icon name="tag" size={16} />
                <select name="business_category" defaultValue="" style={{ border: 'none', outline: 'none', background: 'none', width: '100%' }}>
                  <option value="" disabled>Choisir une catégorie</option>
                  {CATS.map((c) => <option key={c.key} value={c.name}>{c.name}</option>)}
                </select>
              </div>
            </div>

            {state.error && (
              <div className="row gap8" style={{ marginTop: 16, padding: '11px 14px', background: 'var(--red-tint)', color: 'var(--red-dark)', borderRadius: 'var(--r-md)', fontSize: 13.5, fontWeight: 600 }}>
                <Icon name="info" size={16} />{state.error}
              </div>
            )}

            <div style={{ marginTop: 18 }}><SubmitButton /></div>
            <button type="button" className="btn btn-ghost btn-block" style={{ marginTop: 10 }} onClick={() => go('compte', { tab: 'annonces' })}>
              Revenir à mon compte
            </button>
            <p className="tiny" style={{ textAlign: 'center', marginTop: 14 }}>
              En activant, vous acceptez les conditions Darsouk Pro.
            </p>
          </form>
        </div>
      </div>
    </div>
  );
}