'use client';

import { useState, useCallback } from 'react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { UsageDashboard } from './usage-dashboard';
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
} from '@/components/ui/alert-dialog';
import { Loader2, Trash2, AlertTriangle } from 'lucide-react';
import { useI18n } from '@/lib/hooks/use-i18n';
import { clearDatabase } from '@/lib/utils/database';
import { useSettingsStore } from '@/lib/store/settings';
import { useUserProfileStore } from '@/lib/store/user-profile';
import { toast } from 'sonner';
import { createLogger } from '@/lib/logger';
import { clearCacheErrorMessage } from './clear-cache-error-message';
import { runClearCache, shouldReloadAfterClear } from './clear-cache-workflow';

const log = createLogger('GeneralSettings');

/**
 * The shape of a zustand `persist` API this file needs. Declared structurally
 * so one helper covers both stores without importing either state type.
 */
interface PersistApi {
  getOptions: () => {
    name?: string;
    storage?: { removeItem: (name: string) => unknown };
  };
}

/**
 * Clear a store that persists through the KVStore.
 *
 * Not `persist.clearStorage()`: that discards the promise our KV-backed storage
 * returns, and clearing has to be awaited before the reload below.
 */
async function clearPersistedStore(persistApi: PersistApi, fallbackName: string): Promise<void> {
  const { storage, name } = persistApi.getOptions();
  await storage?.removeItem(name ?? fallbackName);
}

export function GeneralSettings() {
  const { t } = useI18n();

  // Clear cache state
  const [showClearDialog, setShowClearDialog] = useState(false);
  const [confirmInput, setConfirmInput] = useState('');
  const [clearing, setClearing] = useState(false);

  const confirmPhrase = t('settings.clearCacheConfirmPhrase');
  const isConfirmValid = confirmInput === confirmPhrase;

  const handleClearCache = useCallback(async () => {
    if (!isConfirmValid) return;
    setClearing(true);
    try {
      const result = await runClearCache({
        clearDatabase,
        clearLocalStorage: () => localStorage.clear(),
        clearSessionStorage: () => sessionStorage.clear(),
        clearPersistedStores: async () => {
          // The blanket clear only reaches these stores while their KV backend
          // happens to use localStorage. Account-scoped storage needs explicit cleanup.
          await Promise.all([
            clearPersistedStore(useSettingsStore.persist, 'settings-storage'),
            clearPersistedStore(useUserProfileStore.persist, 'user-profile-storage'),
          ]);
        },
      });

      if (result.status === 'asset-pool-deferred') {
        log.warn('Asset pool deletion deferred; remaining cache cleanup completed.');
        toast.error(clearCacheErrorMessage(result.error, t));
      } else {
        toast.success(t('settings.clearCacheSuccess'));
      }

      if (!shouldReloadAfterClear(result)) {
        // The retry stays actionable on this page; see shouldReloadAfterClear.
        setClearing(false);
        return;
      }

      // Reload without waiting. The stores are still live in memory, so the
      // longer this page stays up the more chances a `set()` has to persist
      // something after the clear. The seam refuses writes for the duration of
      // a clear, which covers writes issued while the deletes are in flight,
      // but not ones issued after they complete — hence keeping the window
      // short as well.
      window.location.reload();
    } catch (error) {
      log.error('Failed to clear cache:', error);
      toast.error(clearCacheErrorMessage(error, t));
      setClearing(false);
    }
  }, [isConfirmValid, t]);

  const clearCacheItems =
    t('settings.clearCacheConfirmItems').split('、').length > 1
      ? t('settings.clearCacheConfirmItems').split('、')
      : t('settings.clearCacheConfirmItems').split(', ');

  return (
    <div className="flex flex-col gap-8">
      {/* Usage statistics dashboard */}
      <UsageDashboard />

      {/* Danger Zone - Clear Cache */}
      <div className="relative rounded-xl border border-destructive/30 bg-destructive/[0.03] dark:bg-destructive/[0.06] overflow-hidden">
        {/* Subtle diagonal stripe pattern for danger emphasis */}
        <div
          className="absolute inset-0 opacity-[0.015] dark:opacity-[0.03] pointer-events-none"
          style={{
            backgroundImage: `repeating-linear-gradient(
              -45deg,
              transparent,
              transparent 10px,
              currentColor 10px,
              currentColor 11px
            )`,
          }}
        />

        <div className="relative p-4 space-y-4">
          {/* Header */}
          <div className="flex items-center gap-2.5">
            <div className="p-1.5 rounded-md bg-destructive/10 text-destructive">
              <AlertTriangle className="w-4 h-4" />
            </div>
            <h3 className="text-sm font-semibold text-destructive">{t('settings.dangerZone')}</h3>
          </div>

          {/* Content */}
          <div className="flex items-center justify-between gap-4">
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium">{t('settings.clearCache')}</p>
              <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">
                {t('settings.clearCacheDescription')}
              </p>
            </div>
            <Button
              variant="destructive"
              size="sm"
              className="shrink-0"
              onClick={() => {
                setConfirmInput('');
                setShowClearDialog(true);
              }}
            >
              <Trash2 className="w-3.5 h-3.5 mr-1.5" />
              {t('settings.clearCache')}
            </Button>
          </div>
        </div>
      </div>

      {/* Clear Cache Confirmation Dialog */}
      <AlertDialog
        open={showClearDialog}
        onOpenChange={(open) => {
          if (!clearing) {
            setShowClearDialog(open);
            if (!open) setConfirmInput('');
          }
        }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="flex items-center gap-2 text-destructive">
              <AlertTriangle className="w-5 h-5" />
              {t('settings.clearCacheConfirmTitle')}
            </AlertDialogTitle>
            <AlertDialogDescription asChild>
              <div className="space-y-3">
                <p>{t('settings.clearCacheConfirmDescription')}</p>
                <ul className="space-y-1.5 ml-1">
                  {clearCacheItems.map((item, i) => (
                    <li key={i} className="flex items-center gap-2 text-sm">
                      <span className="w-1.5 h-1.5 rounded-full bg-destructive/60 shrink-0" />
                      {item.trim()}
                    </li>
                  ))}
                </ul>
                <div className="pt-1">
                  <Label className="text-xs font-medium text-foreground">
                    {t('settings.clearCacheConfirmInput')}
                  </Label>
                  <Input
                    className="mt-1.5 h-9 text-sm"
                    placeholder={confirmPhrase}
                    value={confirmInput}
                    onChange={(e) => setConfirmInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && isConfirmValid) {
                        handleClearCache();
                      }
                    }}
                    autoFocus
                  />
                </div>
              </div>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={clearing}>{t('common.cancel')}</AlertDialogCancel>
            <Button
              variant="destructive"
              disabled={!isConfirmValid || clearing}
              onClick={handleClearCache}
            >
              {clearing ? (
                <Loader2 className="w-4 h-4 mr-1.5 animate-spin" />
              ) : (
                <Trash2 className="w-4 h-4 mr-1.5" />
              )}
              {t('settings.clearCacheButton')}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}