import { notFound } from 'next/navigation';
import { getSellerProfile } from '@/lib/queries';
import { Icon } from '@/lib/icons';
import { AdCard } from '@/components/AdCard';
import { Crumb } from '@/components/Crumb';

export const dynamic = 'force-dynamic';

export default async function VendeurPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const profile = getSellerProfile(Number(id) || 101);
  if (!profile) notFound();
  const isPro = profile.type === 'pro';

  return (
    <div className="wrap" style={{ paddingTop: 20, paddingBottom: 44 }}>
      <Crumb
        items={[
          { label: 'Accueil', go: ['home'] },
          { label: 'Annonces', go: ['annonces'] },
          { label: profile.name },
        ]}
      />

      <div className="panel" style={{ marginTop: 16, display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
        <div className="avatar" style={{ background: isPro ? 'var(--ink)' : 'var(--red)', width: 72, height: 72, fontSize: 28 }}>
          {profile.name.charAt(0).toUpperCase()}
        </div>
        <div style={{ flex: 1, minWidth: 220 }}>
          <div className="row gap8">
            <h1 className="h2">{profile.name}</h1>
            {isPro && (
              <span className="chip chip-sm" style={{ background: 'var(--red-tint)', color: 'var(--red-dark)', border: 'none', padding: '2px 10px' }}>
                Pro
              </span>
            )}
          </div>
          <div className="row gap16 small" style={{ marginTop: 8, flexWrap: 'wrap' }}>
            <span className="row gap8">
              <Icon name="star" size={15} fill="var(--gold)" style={{ color: 'var(--gold)' }} />
              {profile.rating.toFixed(1)}
            </span>
            <span className="row gap8"><Icon name="tag" size={14} stroke={1.8} />{profile.adsCount} annonce{profile.adsCount > 1 ? 's' : ''}</span>
            <span className="row gap8"><Icon name="calendar" size={14} stroke={1.8} />Membre depuis {profile.since}</span>
            <span className="row gap8" style={{ color: 'var(--teal)' }}><Icon name="shield" size={14} stroke={1.8} />Profil vérifié</span>
          </div>
        </div>
      </div>

      <h2 className="h3" style={{ marginTop: 28 }}>Annonces de {profile.name}</h2>
      {profile.ads.length === 0 ? (
        <div className="panel empty" style={{ marginTop: 14 }}>
          <div className="empty-ic"><Icon name="tag" size={30} stroke={1.6} /></div>
          <h3 className="h3" style={{ marginTop: 16 }}>Aucune annonce en ligne</h3>
          <p className="body" style={{ maxWidth: 340, margin: '6px auto 0' }}>Ce vendeur n’a pas d’annonce active pour le moment.</p>
        </div>
      ) : (
        <div className="grid cols-3" style={{ marginTop: 14 }}>
          {profile.ads.map((a, i) => <AdCard key={a.id} d={a} idx={i} />)}
        </div>
      )}
    </div>
  );
}