'use client';

import { useState } from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import StatCard from '@/components/ui/StatCard';
import SectionHeader from '@/components/ui/SectionHeader';
import StatusBadge from '@/components/ui/StatusBadge';
import InfoBanner from '@/components/ui/InfoBanner';
import PageHeader from '@/components/ui/PageHeader';
import { siteConfig } from '@/lib/siteConfig';
import {
  CreditCard,
  DollarSign,
  Calendar,
  Download,
  Plus,
  Check,
  AlertTriangle,
  FileText,
  ArrowRight,
  TrendingUp,
  Receipt,
  Building2,
  Wallet,
  Clock,
  ChevronRight,
  Info,
  ExternalLink,
  Percent
} from 'lucide-react';

// ============================================================================
// Types
// ============================================================================

interface PaymentMethod {
  id: string;
  type: 'card' | 'bank' | 'sepa';
  last4: string;
  brand?: string;
  isDefault: boolean;
  expiryMonth?: number;
  expiryYear?: number;
  bankName?: string;
}

interface Invoice {
  id: string;
  invoiceNumber: string;
  date: Date;
  dueDate: Date;
  amount: number;
  vatAmount: number;
  totalAmount: number;
  status: 'paid' | 'pending' | 'overdue' | 'failed';
  description: string;
  sponsorshipType: 'league' | 'team' | 'driver' | 'race' | 'platform';
  pdfUrl: string;
}

interface BillingStats {
  totalSpent: number;
  pendingAmount: number;
  nextPaymentDate: Date;
  nextPaymentAmount: number;
  activeSponsorships: number;
  averageMonthlySpend: number;
}

// ============================================================================
// Mock Data
// ============================================================================

const MOCK_PAYMENT_METHODS: PaymentMethod[] = [
  {
    id: 'pm-1',
    type: 'card',
    last4: '4242',
    brand: 'Visa',
    isDefault: true,
    expiryMonth: 12,
    expiryYear: 2027,
  },
  {
    id: 'pm-2',
    type: 'card',
    last4: '5555',
    brand: 'Mastercard',
    isDefault: false,
    expiryMonth: 6,
    expiryYear: 2026,
  },
  {
    id: 'pm-3',
    type: 'sepa',
    last4: '8901',
    bankName: 'Deutsche Bank',
    isDefault: false,
  },
];

const MOCK_INVOICES: Invoice[] = [
  {
    id: 'inv-1',
    invoiceNumber: 'GP-2025-001234',
    date: new Date('2025-11-01'),
    dueDate: new Date('2025-11-15'),
    amount: 1090.91,
    vatAmount: 207.27,
    totalAmount: 1298.18,
    status: 'paid',
    description: 'GT3 Pro Championship - Primary Sponsor (Q4 2025)',
    sponsorshipType: 'league',
    pdfUrl: '#',
  },
  {
    id: 'inv-2',
    invoiceNumber: 'GP-2025-001235',
    date: new Date('2025-10-01'),
    dueDate: new Date('2025-10-15'),
    amount: 363.64,
    vatAmount: 69.09,
    totalAmount: 432.73,
    status: 'paid',
    description: 'Team Velocity - Gear Sponsor (Q4 2025)',
    sponsorshipType: 'team',
    pdfUrl: '#',
  },
  {
    id: 'inv-3',
    invoiceNumber: 'GP-2025-001236',
    date: new Date('2025-12-01'),
    dueDate: new Date('2025-12-15'),
    amount: 318.18,
    vatAmount: 60.45,
    totalAmount: 378.63,
    status: 'pending',
    description: 'Alex Thompson - Driver Sponsorship (Dec 2025)',
    sponsorshipType: 'driver',
    pdfUrl: '#',
  },
  {
    id: 'inv-4',
    invoiceNumber: 'GP-2025-001237',
    date: new Date('2025-11-15'),
    dueDate: new Date('2025-11-29'),
    amount: 454.55,
    vatAmount: 86.36,
    totalAmount: 540.91,
    status: 'overdue',
    description: 'Touring Car Cup - Secondary Sponsor (Q1 2026)',
    sponsorshipType: 'league',
    pdfUrl: '#',
  },
];

const MOCK_STATS: BillingStats = {
  totalSpent: 12450,
  pendingAmount: 919.54,
  nextPaymentDate: new Date('2025-12-15'),
  nextPaymentAmount: 378.63,
  activeSponsorships: 6,
  averageMonthlySpend: 2075,
};

// ============================================================================
// Components
// ============================================================================

function PaymentMethodCard({
  method, 
  onSetDefault,
  onRemove 
}: { 
  method: PaymentMethod; 
  onSetDefault: () => void;
  onRemove: () => void;
}) {
  const shouldReduceMotion = useReducedMotion();
  
  const getIcon = () => {
    if (method.type === 'sepa') return Building2;
    return CreditCard;
  };
  
  const Icon = getIcon();
  
  const getLabel = () => {
    if (method.type === 'sepa' && method.bankName) {
      return `${method.bankName} •••• ${method.last4}`;
    }
    return `${method.brand} •••• ${method.last4}`;
  };

  return (
    <motion.div 
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
      className={`p-4 rounded-xl border transition-all ${
        method.isDefault 
          ? 'border-primary-blue/50 bg-gradient-to-r from-primary-blue/10 to-transparent shadow-[0_0_20px_rgba(25,140,255,0.1)]' 
          : 'border-charcoal-outline bg-iron-gray/30 hover:border-charcoal-outline/80'
      }`}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
            method.isDefault ? 'bg-primary-blue/20' : 'bg-iron-gray'
          }`}>
            <Icon className={`w-6 h-6 ${method.isDefault ? 'text-primary-blue' : 'text-gray-400'}`} />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="font-medium text-white">{getLabel()}</span>
              {method.isDefault && (
                <span className="px-2 py-0.5 rounded-full text-xs bg-primary-blue/20 text-primary-blue font-medium">
                  Default
                </span>
              )}
            </div>
            {method.expiryMonth && method.expiryYear && (
              <span className="text-sm text-gray-500">
                Expires {String(method.expiryMonth).padStart(2, '0')}/{method.expiryYear}
              </span>
            )}
            {method.type === 'sepa' && (
              <span className="text-sm text-gray-500">SEPA Direct Debit</span>
            )}
          </div>
        </div>
        <div className="flex items-center gap-2">
          {!method.isDefault && (
            <Button variant="secondary" onClick={onSetDefault} className="text-xs">
              Set Default
            </Button>
          )}
          <Button variant="secondary" onClick={onRemove} className="text-xs text-gray-400 hover:text-racing-red">
            Remove
          </Button>
        </div>
      </div>
    </motion.div>
  );
}

function InvoiceRow({ invoice, index }: { invoice: Invoice; index: number }) {
  const shouldReduceMotion = useReducedMotion();
  
  const statusConfig = {
    paid: { 
      icon: Check, 
      label: 'Paid',
      color: 'text-performance-green', 
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30'
    },
    pending: { 
      icon: Clock, 
      label: 'Pending',
      color: 'text-warning-amber', 
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30'
    },
    overdue: { 
      icon: AlertTriangle, 
      label: 'Overdue',
      color: 'text-racing-red', 
      bg: 'bg-racing-red/10',
      border: 'border-racing-red/30'
    },
    failed: { 
      icon: AlertTriangle, 
      label: 'Failed',
      color: 'text-racing-red', 
      bg: 'bg-racing-red/10',
      border: 'border-racing-red/30'
    },
  };

  const typeLabels = {
    league: 'League',
    team: 'Team',
    driver: 'Driver',
    race: 'Race',
    platform: 'Platform',
  };

  const status = statusConfig[invoice.status];
  const StatusIcon = status.icon;

  return (
    <motion.div 
      initial={{ opacity: 0, x: -10 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.2, delay: shouldReduceMotion ? 0 : index * 0.05 }}
      className="flex items-center justify-between p-4 border-b border-charcoal-outline/50 last:border-b-0 hover:bg-iron-gray/20 transition-colors group"
    >
      <div className="flex items-center gap-4 flex-1">
        <div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
          <Receipt className="w-5 h-5 text-gray-400" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-0.5">
            <span className="font-medium text-white truncate">{invoice.description}</span>
            <span className="px-2 py-0.5 rounded text-xs bg-iron-gray text-gray-400 flex-shrink-0">
              {typeLabels[invoice.sponsorshipType]}
            </span>
          </div>
          <div className="flex items-center gap-3 text-sm text-gray-500">
            <span>{invoice.invoiceNumber}</span>
            <span>•</span>
            <span>
              {invoice.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
            </span>
          </div>
        </div>
      </div>
      
      <div className="flex items-center gap-6">
        <div className="text-right">
          <div className="font-semibold text-white">
            €{invoice.totalAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}
          </div>
          <div className="text-xs text-gray-500">
            incl. €{invoice.vatAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })} VAT
          </div>
        </div>
        
        <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${status.bg} ${status.color} border ${status.border}`}>
          <StatusIcon className="w-3 h-3" />
          {status.label}
        </div>
        
        <Button variant="secondary" className="text-xs opacity-0 group-hover:opacity-100 transition-opacity">
          <Download className="w-3 h-3 mr-1" />
          PDF
        </Button>
      </div>
    </motion.div>
  );
}

// ============================================================================
// Main Component
// ============================================================================

export default function SponsorBillingPage() {
  const shouldReduceMotion = useReducedMotion();
  const [paymentMethods, setPaymentMethods] = useState(MOCK_PAYMENT_METHODS);
  const [showAllInvoices, setShowAllInvoices] = useState(false);

  const handleSetDefault = (methodId: string) => {
    setPaymentMethods(methods => 
      methods.map(m => ({ ...m, isDefault: m.id === methodId }))
    );
  };

  const handleRemoveMethod = (methodId: string) => {
    if (confirm('Remove this payment method?')) {
      setPaymentMethods(methods => methods.filter(m => m.id !== methodId));
    }
  };

  const displayedInvoices = showAllInvoices ? MOCK_INVOICES : MOCK_INVOICES.slice(0, 4);

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: shouldReduceMotion ? 0 : 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <motion.div 
      className="max-w-5xl mx-auto py-8 px-4"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {/* Header */}
      <motion.div variants={itemVariants}>
        <PageHeader
          icon={Wallet}
          title="Billing & Payments"
          description="Manage payment methods, view invoices, and track your sponsorship spending"
          iconGradient="from-warning-amber/20 to-warning-amber/5"
          iconBorder="border-warning-amber/30"
        />
      </motion.div>

      {/* Stats Grid */}
      <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <StatCard
          icon={DollarSign}
          label="Total Spent"
          value={`€${MOCK_STATS.totalSpent.toLocaleString('de-DE')}`}
          subValue="All time"
          color="text-performance-green"
          bgColor="bg-performance-green/10"
        />
        <StatCard
          icon={AlertTriangle}
          label="Pending Payments"
          value={`€${MOCK_STATS.pendingAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}`}
          subValue={`${MOCK_INVOICES.filter(i => i.status === 'pending' || i.status === 'overdue').length} invoices`}
          color="text-warning-amber"
          bgColor="bg-warning-amber/10"
        />
        <StatCard
          icon={Calendar}
          label="Next Payment"
          value={MOCK_STATS.nextPaymentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
          subValue={`€${MOCK_STATS.nextPaymentAmount.toLocaleString('de-DE', { minimumFractionDigits: 2 })}`}
          color="text-primary-blue"
          bgColor="bg-primary-blue/10"
        />
        <StatCard
          icon={TrendingUp}
          label="Monthly Average"
          value={`€${MOCK_STATS.averageMonthlySpend.toLocaleString('de-DE')}`}
          subValue="Last 6 months"
          color="text-gray-400"
          bgColor="bg-iron-gray"
        />
      </motion.div>

      {/* Payment Methods */}
      <motion.div variants={itemVariants}>
        <Card className="mb-8 overflow-hidden">
          <SectionHeader 
            icon={CreditCard} 
            title="Payment Methods"
            action={
              <Button variant="secondary" className="text-sm">
                <Plus className="w-4 h-4 mr-2" />
                Add Payment Method
              </Button>
            }
          />
          <div className="p-5 space-y-3">
            {paymentMethods.map((method) => (
              <PaymentMethodCard 
                key={method.id} 
                method={method} 
                onSetDefault={() => handleSetDefault(method.id)}
                onRemove={() => handleRemoveMethod(method.id)}
              />
            ))}
          </div>
          <div className="px-5 pb-5">
            <InfoBanner type="info">
              <p className="mb-1">We support Visa, Mastercard, American Express, and SEPA Direct Debit.</p>
              <p>All payment information is securely processed and stored by our payment provider.</p>
            </InfoBanner>
          </div>
        </Card>
      </motion.div>

      {/* Billing History */}
      <motion.div variants={itemVariants}>
        <Card className="mb-8 overflow-hidden">
          <SectionHeader 
            icon={FileText} 
            title="Billing History"
            color="text-warning-amber"
            action={
              <Button variant="secondary" className="text-sm">
                <Download className="w-4 h-4 mr-2" />
                Export All
              </Button>
            }
          />
          <div>
            {displayedInvoices.map((invoice, index) => (
              <InvoiceRow key={invoice.id} invoice={invoice} index={index} />
            ))}
          </div>
          {MOCK_INVOICES.length > 4 && (
            <div className="p-4 border-t border-charcoal-outline">
              <Button 
                variant="secondary" 
                className="w-full"
                onClick={() => setShowAllInvoices(!showAllInvoices)}
              >
                {showAllInvoices ? 'Show Less' : `View All ${MOCK_INVOICES.length} Invoices`}
                <ChevronRight className={`w-4 h-4 ml-2 transition-transform ${showAllInvoices ? 'rotate-90' : ''}`} />
              </Button>
            </div>
          )}
        </Card>
      </motion.div>

      {/* Platform Fee & VAT Information */}
      <motion.div variants={itemVariants} className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Platform Fee */}
        <Card className="overflow-hidden">
          <div className="p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
            <h3 className="font-semibold text-white flex items-center gap-3">
              <div className="p-2 rounded-lg bg-iron-gray/50">
                <Percent className="w-4 h-4 text-primary-blue" />
              </div>
              Platform Fee
            </h3>
          </div>
          <div className="p-5">
            <div className="text-3xl font-bold text-white mb-2">
              {siteConfig.fees.platformFeePercent}%
            </div>
            <p className="text-sm text-gray-400 mb-4">
              {siteConfig.fees.description}
            </p>
            <div className="text-xs text-gray-500 space-y-1">
              <p>• Applied to all sponsorship payments</p>
              <p>• Covers platform maintenance and analytics</p>
              <p>• Ensures quality sponsorship placements</p>
            </div>
          </div>
        </Card>

        {/* VAT Information */}
        <Card className="overflow-hidden">
          <div className="p-5 border-b border-charcoal-outline bg-gradient-to-r from-iron-gray/30 to-transparent">
            <h3 className="font-semibold text-white flex items-center gap-3">
              <div className="p-2 rounded-lg bg-iron-gray/50">
                <Receipt className="w-4 h-4 text-performance-green" />
              </div>
              VAT Information
            </h3>
          </div>
          <div className="p-5">
            <p className="text-sm text-gray-400 mb-4">
              {siteConfig.vat.notice}
            </p>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between items-center py-2 border-b border-charcoal-outline/50">
                <span className="text-gray-500">Standard VAT Rate</span>
                <span className="text-white font-medium">{siteConfig.vat.standardRate}%</span>
              </div>
              <div className="flex justify-between items-center py-2">
                <span className="text-gray-500">B2B Reverse Charge</span>
                <span className="text-performance-green font-medium">Available</span>
              </div>
            </div>
            <p className="text-xs text-gray-500 mt-4">
              Enter your VAT ID in Settings to enable reverse charge for B2B transactions.
            </p>
          </div>
        </Card>
      </motion.div>

      {/* Billing Support */}
      <motion.div variants={itemVariants} className="mt-6">
        <Card className="p-5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="p-3 rounded-xl bg-iron-gray">
                <Info className="w-5 h-5 text-gray-400" />
              </div>
              <div>
                <h3 className="font-medium text-white">Need help with billing?</h3>
                <p className="text-sm text-gray-500">
                  Contact our billing support for questions about invoices, payments, or refunds.
                </p>
              </div>
            </div>
            <Button variant="secondary">
              Contact Support
              <ExternalLink className="w-4 h-4 ml-2" />
            </Button>
          </div>
        </Card>
      </motion.div>
    </motion.div>
  );
}