'use client';

import { useState } from 'react';
import {
  Settings, Trash2, Loader2, FileSpreadsheet, FileText, Presentation,
} from 'lucide-react';
import { useI18n } from '@/lib/i18n';

export default function GeneralSettingsPage() {
  const { t } = useI18n();
  const [isClearing, setIsClearing] = useState(false);

  const handleClearCache = async () => {
    setIsClearing(true);
    try {
      localStorage.removeItem('translation-settings');
      sessionStorage.clear();
      if ('caches' in window) {
        const cacheNames = await caches.keys();
        await Promise.all(cacheNames.map(name => caches.delete(name)));
      }
      await new Promise(resolve => setTimeout(resolve, 500));
      window.location.reload();
    } catch (error) {
      console.error('Error clearing cache:', error);
      setIsClearing(false);
    }
  };

  const formats = [
    { icon: FileSpreadsheet, color: 'text-green-500', name: t('settings.formats.excel.name'), ext: '.xlsx, .xls', features: [t('settings.formats.formulas'), t('settings.formats.styles'), t('settings.formats.images')] },
    { icon: FileText, color: 'text-blue-500', name: t('settings.formats.word.name'), ext: '.docx, .doc', features: [t('settings.formats.headers'), t('settings.formats.tables'), t('settings.formats.images')] },
    { icon: Presentation, color: 'text-orange-500', name: t('settings.formats.powerpoint.name'), ext: '.pptx, .ppt', features: [t('settings.formats.slides'), t('settings.formats.notes'), t('settings.formats.images')] },
  ];

  return (
    <div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
      {/* ── Editorial Header ───────────────────────────────────── */}
      <div className="mb-12">
        <span className="accent-pill mb-4 block w-fit">{t('settings.title')}</span>
        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
          {t('settings.title')}
        </h1>
        <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('settings.subtitle')}</p>
      </div>

      <div className="space-y-12">
        {/* Supported Formats */}
        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
          <div className="flex items-center gap-4 mb-10 text-brand-accent">
            <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent">
              <Settings size={24} />
            </div>
            <div>
              <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
                {t('settings.formats.title')}
              </h3>
              <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">
                {t('settings.formats.subtitle')}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {formats.map((f) => {
              const Icon = f.icon;
              return (
                <div
                  key={f.name}
                  className="p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
                >
                  <div className="w-12 h-12 bg-white dark:bg-white/10 rounded-2xl flex items-center justify-center shadow-sm mb-6">
                    <Icon size={24} className={f.color} />
                  </div>
                  <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">
                    {f.name}
                  </p>
                  <p className="text-[9px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mb-4">
                    {f.ext}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    {f.features.map(ft => (
                      <span
                        key={ft}
                        className="px-3 py-1 bg-white dark:bg-white/10 rounded-full text-[8px] font-black uppercase tracking-widest text-brand-dark/40 dark:text-white/40 border border-black/5 dark:border-white/10"
                      >
                        {ft}
                      </span>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* Cache */}
        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
          <div className="flex items-center gap-6">
            <div className="w-14 h-14 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent shrink-0">
              <Trash2 size={28} />
            </div>
            <div>
              <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">
                {t('settings.cache.title')}
              </h3>
              <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
                {t('settings.cache.desc')}
              </p>
            </div>
          </div>
          <button
            onClick={handleClearCache}
            disabled={isClearing}
            className="px-8 py-3 bg-brand-muted dark:bg-white/10 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all disabled:opacity-50 shrink-0"
          >
            {isClearing ? (
              <><Loader2 className="me-1.5 h-3.5 w-3.5 animate-spin inline" />{t('settings.cache.clearing')}</>
            ) : (
              <><Trash2 className="me-1.5 h-3.5 w-3.5 inline" />{t('settings.cache.clear')}</>
            )}
          </button>
        </section>
      </div>
    </div>
  );
}
