'use client';

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

export default function GeneralSettingsPage() {
  const { t } = useI18n();
  const [isClearing, setIsClearing] = useState(false);
  const [isConfirmingClear, setIsConfirmingClear] = 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);
      setIsConfirmingClear(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 ───────────────────────────────────── */}
      <PageHeader
        pill={t('settings.pill')}
        titleBase={t('settings.title')}
        titleAccent={t('settings.titleAccent')}
        subtitle={t('settings.subtitle')}
        className="mb-12"
      />

      <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-xs font-black uppercase tracking-[0.2em] text-brand-dark dark:text-white">
                {t('settings.formats.title')}
              </h3>
              <p className="text-[10px] text-brand-dark/50 dark:text-white/50 font-semibold uppercase tracking-wider 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-xs font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">
                    {f.name}
                  </p>
                  <p className="text-[10px] text-brand-dark/50 dark:text-white/50 font-bold uppercase tracking-wider 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-[10px] font-black uppercase tracking-wider text-brand-dark/50 dark:text-white/50 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/50 dark:text-white/50 text-xs font-semibold uppercase tracking-wider mt-2 leading-relaxed">
                {t('settings.cache.desc')}
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-2 shrink-0">
            {isConfirmingClear ? (
              <>
                <button
                  onClick={handleClearCache}
                  disabled={isClearing}
                  className="px-8 py-3 bg-red-500 text-white rounded-xl text-xs font-black uppercase tracking-wider hover:bg-red-600 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')}</>
                  ) : (
                    t('settings.cache.confirm')
                  )}
                </button>
                <button
                  onClick={() => setIsConfirmingClear(false)}
                  disabled={isClearing}
                  className="px-8 py-2 text-[11px] font-bold uppercase tracking-wider text-brand-dark/50 dark:text-white/50 hover:text-brand-dark dark:hover:text-white transition-colors"
                >
                  {t('settings.cache.cancelClear')}
                </button>
              </>
            ) : (
              <button
                onClick={() => setIsConfirmingClear(true)}
                disabled={isClearing}
                className="px-8 py-3 bg-brand-muted dark:bg-white/10 text-brand-dark/50 dark:text-white/50 rounded-xl text-xs font-black uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all disabled:opacity-50 shrink-0"
              >
                <Trash2 className="me-1.5 h-3.5 w-3.5 inline" />{t('settings.cache.clear')}
              </button>
            )}
          </div>
        </section>
      </div>
    </div>
  );
}
