import { CreditCard, Download, Plus, ShieldCheck, Wallet } from 'lucide-react';
import React, { useState } from 'react';

const TRANSACTIONS = [
    { id: 'INV-2026-0041', date: '15.07.2026', description: 'Server Verlängerung srv-fra-mc01 (Minecraft)', amount: '- €12,50', status: 'Bezahlt' },
    { id: 'INV-2026-0038', date: '01.07.2026', description: 'Guthaben-Aufladung (PayPal)', amount: '+ €50,00', status: 'Gutgeschrieben' },
    { id: 'INV-2026-0012', date: '15.06.2026', description: 'Server Verlängerung srv-fra-vps02 (Cloud VPS)', amount: '- €5,90', status: 'Bezahlt' },
];

export const BillingTab: React.FC = () => {
    const [balance, setBalance] = useState<number>(42.5);
    const [showTopUpMsg, setShowTopUpMsg] = useState<boolean>(false);

    const handleAddCredit = (amount: number) => {
        setBalance((prev) => prev + amount);
        setShowTopUpMsg(true);
        setTimeout(() => setShowTopUpMsg(false), 3000);
    };

    return (
        <div className="space-y-6">
            {/* Top Balance Summary Card */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="md:col-span-2 rounded-2xl border border-cyan-900/50 bg-gradient-to-r from-slate-900 via-slate-900 to-cyan-950/40 p-6 flex flex-col justify-between">
                    <div>
                        <span className="text-xs font-mono text-cyan-400 font-semibold uppercase tracking-wider">
                            Dein PrePaid Kontostand
                        </span>
                        <div className="text-4xl font-extrabold text-white mt-1">
                            €{balance.toFixed(2)}{' '}
                            <span className="text-xs text-emerald-400 font-sans font-medium">
                                (Automatische Verlängerung aktiv)
                            </span>
                        </div>
                        <p className="text-xs text-slate-400 mt-2">
                            Dein Guthaben wird automatisch zur monatlichen Verlängerung deiner gebuchten Server genutzt.
                        </p>
                    </div>

                    <div className="pt-4 flex flex-wrap gap-2">
                        <button
                            onClick={() => handleAddCredit(25)}
                            className="px-4 py-2 rounded-xl bg-cyan-500 text-slate-950 font-bold text-xs hover:bg-cyan-400 flex items-center gap-1.5 shadow-md"
                        >
                            <Plus className="h-3.5 w-3.5" /> + €25,00 Aufladen
                        </button>
                        <button
                            onClick={() => handleAddCredit(50)}
                            className="px-4 py-2 rounded-xl bg-slate-800 border border-slate-700 text-white font-bold text-xs hover:bg-slate-700 flex items-center gap-1.5"
                        >
                            <Plus className="h-3.5 w-3.5" /> + €50,00 Aufladen
                        </button>
                    </div>

                    {showTopUpMsg && (
                        <div className="mt-3 text-xs text-emerald-400 font-mono animate-fade-in">
                            ✓ Guthaben erfolgreich aufgebucht! Neuer Kontostand: €{balance.toFixed(2)}
                        </div>
                    )}
                </div>

                {/* Payment Methods Info */}
                <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 space-y-3">
                    <h3 className="text-sm font-bold text-white flex items-center gap-2">
                        <CreditCard className="h-4 w-4 text-cyan-400" /> Zahlungsarten
                    </h3>
                    <div className="space-y-2 text-xs text-slate-400">
                        <div className="flex justify-between items-center py-1.5 border-b border-slate-800/80">
                            <span>PayPal / Sofort</span>
                            <span className="text-emerald-400 font-semibold">Aktiv</span>
                        </div>
                        <div className="flex justify-between items-center py-1.5 border-b border-slate-800/80">
                            <span>Kreditkarte (Visa/MC)</span>
                            <span className="text-emerald-400 font-semibold">Aktiv</span>
                        </div>
                        <div className="flex justify-between items-center py-1.5 border-b border-slate-800/80">
                            <span>Paysafecard</span>
                            <span className="text-emerald-400 font-semibold">Aktiv</span>
                        </div>
                        <div className="flex justify-between items-center py-1.5">
                            <span>Krypto (BTC / SOL / USDT)</span>
                            <span className="text-emerald-400 font-semibold">Aktiv</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* Transaction History Table */}
            <div className="rounded-2xl border border-slate-800 bg-slate-900/80 p-6">
                <h3 className="text-base font-bold text-white mb-4 flex items-center gap-2">
                    <Wallet className="h-4 w-4 text-cyan-400" /> Rechnungsverlauf & Transaktionen
                </h3>

                <div className="overflow-x-auto">
                    <table className="w-full text-left text-xs font-mono">
                        <thead className="border-b border-slate-800 text-slate-400 uppercase text-[10px]">
                            <tr>
                                <th className="pb-3 font-semibold">Rechnungs-ID</th>
                                <th className="pb-3 font-semibold">Datum</th>
                                <th className="pb-3 font-semibold">Beschreibung</th>
                                <th className="pb-3 font-semibold">Betrag</th>
                                <th className="pb-3 font-semibold">Status</th>
                                <th className="pb-3 font-semibold text-right">PDF</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-800/60">
                            {TRANSACTIONS.map((tx) => (
                                <tr key={tx.id} className="hover:bg-slate-900/60 transition-colors">
                                    <td className="py-3 font-bold text-cyan-400">{tx.id}</td>
                                    <td className="py-3 text-slate-300">{tx.date}</td>
                                    <td className="py-3 text-slate-200 font-sans">{tx.description}</td>
                                    <td className={`py-3 font-bold ${tx.amount.startsWith('+') ? 'text-emerald-400' : 'text-slate-200'}`}>
                                        {tx.amount}
                                    </td>
                                    <td className="py-3">
                                        <span className="px-2 py-0.5 rounded bg-emerald-950 text-emerald-400 border border-emerald-800 text-[10px]">
                                            {tx.status}
                                        </span>
                                    </td>
                                    <td className="py-3 text-right">
                                        <button className="p-1 rounded text-slate-400 hover:text-cyan-400" title="Rechnung Herunterladen">
                                            <Download className="h-4 w-4" />
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};