import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { CheckCircle, XCircle, Clock, RefreshCw } from 'lucide-react';
import AdminLayout from '../../components/AdminLayout';

interface Payment {
  id: number;
  user_id: number;
  user_email: string;
  user_name: string | null;
  amount_cents: number;
  currency: string;
  status: 'succeeded' | 'pending' | 'failed' | 'refunded';
  description: string | null;
  stripe_invoice_id: string | null;
  created_at: string;
}

export default function AdminPayments() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [payments, setPayments] = useState<Payment[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [darkMode, setDarkMode] = useState(false);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    try {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark') setDarkMode(true);
    } catch {}
  }, []);

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    }
  }, [status, router]);

  useEffect(() => {
    if (status === 'authenticated') {
      loadPayments();
    }
  }, [status]);

  async function loadPayments() {
    setLoading(true);
    try {
      const res = await fetch('/api/admin/payments');
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setPayments(data.payments || []);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  const filteredPayments = payments.filter(p => 
    filter === 'all' || p.status === filter
  );

  const totalRevenue = payments
    .filter(p => p.status === 'succeeded')
    .reduce((sum, p) => sum + p.amount_cents, 0);

  const theme = {
    bg: darkMode ? '#1a1a2e' : '#f8fafc',
    cardBg: darkMode ? '#16213e' : '#ffffff',
    text: darkMode ? '#e2e8f0' : '#1e293b',
    textSecondary: darkMode ? '#94a3b8' : '#64748b',
    border: darkMode ? '#2d3748' : '#e2e8f0',
  };

  const S: Record<string, React.CSSProperties> = {
    summary: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
      gap: 16,
      marginBottom: 24,
    },
    summaryCard: {
      background: theme.cardBg,
      borderRadius: 12,
      border: `1px solid ${theme.border}`,
      padding: 20,
      textAlign: 'center',
    },
    summaryValue: {
      fontSize: 28,
      fontWeight: 700,
      color: theme.text,
    },
    summaryLabel: {
      fontSize: 14,
      color: theme.textSecondary,
      marginTop: 4,
    },
    controls: {
      display: 'flex',
      gap: 12,
      marginBottom: 24,
    },
    select: {
      padding: '8px 12px',
      borderRadius: 8,
      border: `1px solid ${theme.border}`,
      background: theme.cardBg,
      color: theme.text,
      fontSize: 14,
    },
    table: {
      width: '100%',
      borderCollapse: 'collapse',
      background: theme.cardBg,
      borderRadius: 12,
      overflow: 'hidden',
    },
    th: {
      padding: '12px 16px',
      textAlign: 'left' as const,
      background: darkMode ? '#1f2937' : '#f9fafb',
      color: theme.textSecondary,
      fontSize: 12,
      fontWeight: 600,
      textTransform: 'uppercase' as const,
      borderBottom: `1px solid ${theme.border}`,
    },
    td: {
      padding: '12px 16px',
      borderBottom: `1px solid ${theme.border}`,
      color: theme.text,
      fontSize: 14,
    },
    statusBadge: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 4,
      padding: '4px 8px',
      borderRadius: 4,
      fontSize: 12,
      fontWeight: 500,
    },
  };

  function getStatusStyle(status: string) {
    switch (status) {
      case 'succeeded':
        return { background: '#dcfce7', color: '#16a34a' };
      case 'failed':
        return { background: '#fee2e2', color: '#dc2626' };
      case 'pending':
        return { background: '#fef3c7', color: '#ca8a04' };
      case 'refunded':
        return { background: '#e0e7ff', color: '#4f46e5' };
      default:
        return { background: '#f3f4f6', color: '#6b7280' };
    }
  }

  function getStatusIcon(status: string) {
    switch (status) {
      case 'succeeded':
        return <CheckCircle size={14} />;
      case 'failed':
        return <XCircle size={14} />;
      case 'pending':
        return <Clock size={14} />;
      case 'refunded':
        return <RefreshCw size={14} />;
      default:
        return null;
    }
  }

  if (status === 'loading' || loading) {
    return (
      <AdminLayout darkMode={darkMode} setDarkMode={setDarkMode} currentPage="payments">
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh', color: theme.textSecondary }}>
          Loading...
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout darkMode={darkMode} setDarkMode={setDarkMode} currentPage="payments">
      <Head>
        <title>Payment History - Admin - Gregory AI</title>
      </Head>

      {error && (
        <div style={{ padding: 16, background: '#fee2e2', color: '#dc2626', borderRadius: 8, marginBottom: 24 }}>
          {error}
        </div>
      )}

      {/* Summary Cards */}
      <div style={S.summary}>
        <div style={S.summaryCard}>
          <div style={{ ...S.summaryValue, color: '#10b981' }}>
            ${(totalRevenue / 100).toFixed(2)}
          </div>
          <div style={S.summaryLabel}>Total Revenue</div>
        </div>
        <div style={S.summaryCard}>
          <div style={S.summaryValue}>{payments.filter(p => p.status === 'succeeded').length}</div>
          <div style={S.summaryLabel}>Successful Payments</div>
        </div>
        <div style={S.summaryCard}>
          <div style={{ ...S.summaryValue, color: '#dc2626' }}>
            {payments.filter(p => p.status === 'failed').length}
          </div>
          <div style={S.summaryLabel}>Failed Payments</div>
        </div>
        <div style={S.summaryCard}>
          <div style={S.summaryValue}>{payments.length}</div>
          <div style={S.summaryLabel}>Total Transactions</div>
        </div>
      </div>

      {/* Controls */}
      <div style={S.controls}>
        <select
          style={S.select}
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        >
          <option value="all">All Status</option>
          <option value="succeeded">Succeeded</option>
          <option value="failed">Failed</option>
          <option value="pending">Pending</option>
          <option value="refunded">Refunded</option>
        </select>
        <button
          onClick={loadPayments}
          style={{
            ...S.select,
            cursor: 'pointer',
            background: 'linear-gradient(90deg, #2563eb, #7c3aed)',
            color: '#fff',
            border: 'none',
          }}
        >
          Refresh
        </button>
      </div>

      {/* Payments Table */}
      <div style={{ overflowX: 'auto', borderRadius: 12, border: `1px solid ${theme.border}` }}>
        <table style={S.table}>
          <thead>
            <tr>
              <th style={S.th}>User</th>
              <th style={S.th}>Amount</th>
              <th style={S.th}>Status</th>
              <th style={S.th}>Description</th>
              <th style={S.th}>Date</th>
            </tr>
          </thead>
          <tbody>
            {filteredPayments.length === 0 ? (
              <tr>
                <td colSpan={5} style={{ ...S.td, textAlign: 'center', color: theme.textSecondary }}>
                  No payments found
                </td>
              </tr>
            ) : (
              filteredPayments.map((payment) => (
                <tr key={payment.id}>
                  <td style={S.td}>
                    <div style={{ fontWeight: 500 }}>{payment.user_name || 'Unknown'}</div>
                    <div style={{ fontSize: 12, color: theme.textSecondary }}>{payment.user_email}</div>
                  </td>
                  <td style={S.td}>
                    <span style={{ fontWeight: 600 }}>
                      ${(payment.amount_cents / 100).toFixed(2)}
                    </span>
                    <span style={{ color: theme.textSecondary, marginLeft: 4 }}>
                      {payment.currency}
                    </span>
                  </td>
                  <td style={S.td}>
                    <span style={{ ...S.statusBadge, ...getStatusStyle(payment.status) }}>
                      {getStatusIcon(payment.status)}
                      {payment.status}
                    </span>
                  </td>
                  <td style={S.td}>{payment.description || '-'}</td>
                  <td style={S.td}>
                    {new Date(payment.created_at).toLocaleDateString('en-US', {
                      year: 'numeric',
                      month: 'short',
                      day: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                    })}
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </AdminLayout>
  );
}