'use client';

import React, { useState } from 'react';
import { RefreshCw, Check, AlertCircle } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function SyncPaymentsButton() {
    const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
    const [result, setResult] = useState<any>(null);
    const router = useRouter();

    const handleSync = async () => {
        if (status === 'loading') return;
        
        setStatus('loading');
        try {
            const response = await fetch('/api/admin/sync-payments', {
                method: 'POST'
            });
            const data = await response.json();
            
            if (data.success) {
                setResult(data);
                setStatus('success');
                router.refresh();
                setTimeout(() => setStatus('idle'), 3000);
            } else {
                setStatus('error');
            }
        } catch (err) {
            console.error(err);
            setStatus('error');
        }
    };

    return (
        <div className="flex items-center gap-3">
            {status === 'success' && result && (
                <div className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-100 flex items-center gap-2 animate-in fade-in slide-in-from-right-2">
                    <Check size={12} />
                    {result.processedCount} İŞLEM TARANDI
                </div>
            )}
            
            <button
                onClick={handleSync}
                disabled={status === 'loading'}
                className={`flex items-center justify-center gap-2 px-6 py-3 rounded-2xl text-sm font-bold transition shadow-lg ${
                    status === 'loading' ? 'bg-gray-100 text-gray-400 cursor-not-allowed' :
                    status === 'error' ? 'bg-red-50 text-red-600 border border-red-100' :
                    'bg-emerald-600 text-white hover:bg-emerald-700 shadow-emerald-100'
                }`}
            >
                <RefreshCw size={18} className={status === 'loading' ? 'animate-spin' : ''} />
                {status === 'loading' ? 'Senkronize Ediliyor...' : 'Ödemeleri Eşitle'}
            </button>
        </div>
    );
}