'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Database, Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useStore } from '@/lib/store';
import { useTranslation } from '@/lib/i18n';

type SeedStatus = 'idle' | 'loading' | 'success' | 'error';

export default function SeedButton() {
  const { t, language } = useTranslation();
  const [status, setStatus] = useState<SeedStatus>('idle');
  const [summary, setSummary] = useState<string>('');

  const handleSeed = async () => {
    setStatus('loading');

    try {
      const response = await fetch('/api/seed', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ reset: true }),
      });

      const data = await response.json();

      if (!response.ok) {
        setStatus('error');
        setSummary(data.error || 'Failed to seed data');
        return;
      }

      setStatus('success');
      const s = data.summary;
      setSummary(
        `${s.areas} areas, ${s.users} users, ${s.complaints} complaints`
      );

      // Reset to idle after 5 seconds
      setTimeout(() => {
        setStatus('idle');
        setSummary('');
      }, 5000);
    } catch (err) {
      setStatus('error');
      setSummary(t('messages.error.networkError'));
      setTimeout(() => {
        setStatus('idle');
        setSummary('');
      }, 5000);
    }
  };

  return (
    <div className="inline-flex flex-col items-end gap-1">
      <Button
        variant="outline"
        size="sm"
        onClick={handleSeed}
        disabled={status === 'loading'}
        className="gap-1.5 text-xs h-7 border-emerald-200 text-emerald-700 hover:bg-emerald-50 hover:border-emerald-300 hover:text-emerald-800 bg-emerald-50/50"
      >
        {status === 'loading' ? (
          <>
            <Loader2 className="w-3 h-3 animate-spin" />
            {t('common.loading')}
          </>
        ) : status === 'success' ? (
          <>
            <CheckCircle2 className="w-3 h-3 text-emerald-600" />
            {language === 'en' ? 'Seeded!' : 'সিড সম্পন্ন!'}
          </>
        ) : status === 'error' ? (
          <>
            <AlertCircle className="w-3 h-3 text-red-500" />
            Error
          </>
        ) : (
          <>
            <Database className="w-3 h-3" />
            {language === 'en' ? 'Seed Demo Data' : 'ডেমো ডেটা সিড করুন'}
          </>
        )}
      </Button>

      <AnimatePresence>
        {summary && status === 'success' && (
          <motion.p
            initial={{ opacity: 0, y: -5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="text-[10px] text-emerald-600 font-medium"
          >
            {summary}
          </motion.p>
        )}
        {summary && status === 'error' && (
          <motion.p
            initial={{ opacity: 0, y: -5 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="text-[10px] text-red-500 font-medium"
          >
            {summary}
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  );
}