'use client';
import { Plus, Wrench, Shield } from 'lucide-react';
import { useTranslation } from '@client/contexts/LanguageContext';

interface Entry {
  date: string;
  version: string;
  type: 'feature' | 'fix' | 'security';
  title: string;
  body: string;
}

export default function ChangelogPage() {
  const { t } = useTranslation();

  const entries: Entry[] = [
    { date: t('landing.changelog.e1Date', 'April 18, 2026'), version: '4.2.0', type: 'feature',
      title: t('landing.changelog.e1Title', 'Multi-branch unified inbox'),
      body: t('landing.changelog.e1Body', 'View, assign, and reply across every branch from one consolidated conversations view.') },
    { date: t('landing.changelog.e2Date', 'April 4, 2026'), version: '4.1.2', type: 'fix',
      title: t('landing.changelog.e2Title', 'POS sync reliability'),
      body: t('landing.changelog.e2Body', 'Resolved an edge case where modifier-only menu updates were not propagating to Toast.') },
    { date: t('landing.changelog.e3Date', 'March 22, 2026'), version: '4.1.0', type: 'feature',
      title: t('landing.changelog.e3Title', 'Voice prompt library'),
      body: t('landing.changelog.e3Body', 'Pre-built greetings, upsells, and fallback scripts you can drop into your AI agent in one click.') },
    { date: t('landing.changelog.e4Date', 'March 8, 2026'), version: '4.0.5', type: 'security',
      title: t('landing.changelog.e4Title', 'SOC 2 Type II re-attestation'),
      body: t('landing.changelog.e4Body', 'Completed our annual third-party audit with zero exceptions. New report available on request.') },
    { date: t('landing.changelog.e5Date', 'February 14, 2026'), version: '4.0.0', type: 'feature',
      title: t('landing.changelog.e5Title', 'WhatsApp Business API channel'),
      body: t('landing.changelog.e5Body', 'Native WhatsApp inbox with template messaging, media, and AI auto-reply.') },
  ];

  const iconFor = (t: Entry['type']) =>
    t === 'feature' ? <Plus size={14} /> : t === 'fix' ? <Wrench size={14} /> : <Shield size={14} />;
  const colorFor = (t: Entry['type']) =>
    t === 'feature'
      ? 'bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300'
      : t === 'fix'
      ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300'
      : 'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-700 dark:text-emerald-300';

  return (
    <div data-ra-landing className="min-h-screen bg-slate-50 dark:bg-[#080a0f]">
      <section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
        <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-3">{t('landing.changelog.title', 'Changelog')}</h1>
        <p className="text-base sm:text-lg text-slate-500 dark:text-slate-400 mb-12">
          {t('landing.changelog.sub', 'New features, fixes, and platform improvements — shipped continuously.')}
        </p>

        <div className="space-y-6">
          {entries.map((e, i) => (
            <article key={i} className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
              <div className="flex flex-wrap items-center gap-2 mb-3">
                <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${colorFor(e.type)}`}>
                  {iconFor(e.type)}
                  {e.type === 'feature' ? t('landing.changelog.tagFeature', 'Feature') : e.type === 'fix' ? t('landing.changelog.tagFix', 'Fix') : t('landing.changelog.tagSecurity', 'Security')}
                </span>
                <span className="text-xs font-mono text-slate-500 dark:text-slate-400">v{e.version}</span>
                <span className="text-xs text-slate-400 dark:text-slate-500">·</span>
                <span className="text-xs text-slate-500 dark:text-slate-400">{e.date}</span>
              </div>
              <h2 className="text-lg font-bold text-slate-900 dark:text-white mb-1.5">{e.title}</h2>
              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{e.body}</p>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}