import React, { useState, useEffect } from 'react';
import { useAuth } from '../../context/AuthContext';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../../components/ui/dialog';
import api from '../../utils/api';
import { toast } from 'sonner';
import {
  DollarSign,
  CreditCard,
  TrendingUp,
  Heart,
  Search,
  Loader2,
  Calendar,
  Edit,
  XCircle,
  Download,
  FileDown,
  AlertTriangle,
  Info,
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Copy
} from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../../components/ui/dropdown-menu';
import StatusBadge from '@/components/StatusBadge';

const AdminSubscriptions = () => {
  const { hasPermission } = useAuth();
  const [subscriptions, setSubscriptions] = useState([]);
  const [filteredSubscriptions, setFilteredSubscriptions] = useState([]);
  const [plans, setPlans] = useState([]);
  const [stats, setStats] = useState({});
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [planFilter, setPlanFilter] = useState('all');
  const [exporting, setExporting] = useState(false);
  const [expandedRows, setExpandedRows] = useState(new Set());

  // Edit subscription dialog state
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [selectedSubscription, setSelectedSubscription] = useState(null);
  const [editFormData, setEditFormData] = useState({
    status: '',
    end_date: ''
  });
  const [isUpdating, setIsUpdating] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    filterSubscriptions();
  }, [searchQuery, statusFilter, planFilter, subscriptions]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const [subsResponse, statsResponse, plansResponse] = await Promise.all([
        api.get('/admin/subscriptions'),
        api.get('/admin/subscriptions/stats'),
        api.get('/admin/subscriptions/plans')
      ]);

      setSubscriptions(subsResponse.data);
      setStats(statsResponse.data);
      setPlans(plansResponse.data);
    } catch (error) {
      console.error('Failed to fetch subscription data:', error);
      toast.error('Failed to load subscription data');
    } finally {
      setLoading(false);
    }
  };

  const filterSubscriptions = () => {
    let filtered = [...subscriptions];

    // Search filter (member name or email)
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(sub =>
        sub.user.first_name.toLowerCase().includes(query) ||
        sub.user.last_name.toLowerCase().includes(query) ||
        sub.user.email.toLowerCase().includes(query)
      );
    }

    // Status filter
    if (statusFilter !== 'all') {
      filtered = filtered.filter(sub => sub.status === statusFilter);
    }

    // Plan filter
    if (planFilter !== 'all') {
      filtered = filtered.filter(sub => sub.plan.id === planFilter);
    }

    setFilteredSubscriptions(filtered);
  };

  const handleEdit = (subscription) => {
    setSelectedSubscription(subscription);
    setEditFormData({
      status: subscription.status,
      end_date: subscription.end_date ? new Date(subscription.end_date).toISOString().split('T')[0] : ''
    });
    setEditDialogOpen(true);
  };

  const handleSaveSubscription = async () => {
    if (!selectedSubscription) return;

    // Check if status is changing
    const statusChanged = editFormData.status !== selectedSubscription.status;

    if (statusChanged) {
      // Get status change consequences
      let warningMessage = '';
      let confirmText = '';

      if (editFormData.status === 'cancelled') {
        warningMessage = `⚠️ CRITICAL: Cancelling this subscription will:

• Set the user's status to INACTIVE
• Remove their member access immediately
• Stop all future billing
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})

Current Status: ${selectedSubscription.status.toUpperCase()}
New Status: CANCELLED

Are you absolutely sure you want to proceed?`;
        confirmText = 'Yes, Cancel Subscription';
      } else if (editFormData.status === 'expired') {
        warningMessage = `⚠️ WARNING: Setting this subscription to EXPIRED will:

• Set the user's status to INACTIVE
• Remove their member access
• Mark the subscription as ended
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})

Current Status: ${selectedSubscription.status.toUpperCase()}
New Status: EXPIRED

Are you sure you want to proceed?`;
        confirmText = 'Yes, Mark as Expired';
      } else if (editFormData.status === 'active') {
        warningMessage = `✓ Activating this subscription will:

• Set the user's status to ACTIVE
• Grant full member access
• Resume billing if applicable
• This action affects: ${selectedSubscription.user.first_name} ${selectedSubscription.user.last_name} (${selectedSubscription.user.email})

Current Status: ${selectedSubscription.status.toUpperCase()}
New Status: ACTIVE

Proceed with activation?`;
        confirmText = 'Yes, Activate Subscription';
      }

      // Show confirmation dialog
      const confirmed = window.confirm(warningMessage);
      if (!confirmed) {
        return; // User cancelled
      }
    }

    setIsUpdating(true);
    try {
      await api.put(`/admin/subscriptions/${selectedSubscription.id}`, {
        status: editFormData.status,
        end_date: editFormData.end_date ? new Date(editFormData.end_date).toISOString() : null
      });

      toast.success('Subscription updated successfully');
      setEditDialogOpen(false);
      fetchData(); // Refresh data
    } catch (error) {
      console.error('Failed to update subscription:', error);
      toast.error(error.response?.data?.detail || 'Failed to update subscription');
    } finally {
      setIsUpdating(false);
    }
  };

  const handleCancelSubscription = async (subscriptionId) => {
    if (!window.confirm('Are you sure you want to cancel this subscription? This will also set the user status to inactive.')) {
      return;
    }

    try {
      await api.post(`/admin/subscriptions/${subscriptionId}/cancel`);
      toast.success('Subscription cancelled successfully');
      fetchData(); // Refresh data
    } catch (error) {
      console.error('Failed to cancel subscription:', error);
      toast.error(error.response?.data?.detail || 'Failed to cancel subscription');
    }
  };

  const handleExport = async (exportType) => {
    setExporting(true);
    try {
      const params = exportType === 'current' ? {
        status: statusFilter !== 'all' ? statusFilter : undefined,
        plan_id: planFilter !== 'all' ? planFilter : undefined,
        search: searchQuery || undefined
      } : {};

      const response = await api.get('/admin/subscriptions/export', {
        params,
        responseType: 'blob'
      });

      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `subscriptions_export_${new Date().toISOString().split('T')[0]}.csv`);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);

      toast.success('Subscriptions exported successfully');
    } catch (error) {
      console.error('Failed to export subscriptions:', error);
      toast.error('Failed to export subscriptions');
    } finally {
      setExporting(false);
    }
  };

  const formatPrice = (cents) => {
    return `$${(cents / 100).toFixed(2)}`;
  };

  const formatDate = (dateString) => {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  const formatDateTime = (dateString) => {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  const toggleRowExpansion = (subscriptionId) => {
    setExpandedRows((prev) => {
      const newExpanded = new Set(prev);
      if (newExpanded.has(subscriptionId)) {
        newExpanded.delete(subscriptionId);
      } else {
        newExpanded.add(subscriptionId);
      }
      return newExpanded;
    });
  };

  const copyToClipboard = async (text, label) => {
    try {
      await navigator.clipboard.writeText(text);
      toast.success(`${label} copied to clipboard`);
    } catch (error) {
      toast.error('Failed to copy to clipboard');
    }
  };



  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="h-12 w-12 animate-spin text-brand-purple " />
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Subscription Management
        </h1>
        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          View and manage all member subscriptions
        </p>
      </div>

      {/* Stats Cards */}
      <div className="grid md:grid-cols-4 gap-6">
        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Total Subscriptions
              </p>
              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                {stats.total || 0}
              </p>
            </div>
            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
              <CreditCard className="h-6 w-6 text-brand-purple " />
            </div>
          </div>
        </Card>

        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Active Members
              </p>
              <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                {stats.active || 0}
              </p>
            </div>
            <div className="p-3 bg-[var(--green-light)]/10 rounded-full">
              <TrendingUp className="h-6 w-6 text-[var(--green-light)]" />
            </div>
          </div>
        </Card>

        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Total Revenue
              </p>
              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                {formatPrice(stats.total_revenue || 0)}
              </p>
            </div>
            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
              <DollarSign className="h-6 w-6 text-brand-purple " />
            </div>
          </div>
        </Card>

        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                Total Donations
              </p>
              <p className="text-3xl font-bold text-[var(--orange-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                {formatPrice(stats.total_donations || 0)}
              </p>
            </div>
            <div className="p-3 bg-[var(--orange-light)]/10 rounded-full">
              <Heart className="h-6 w-6 text-[var(--orange-light)]" />
            </div>
          </div>
        </Card>
      </div>

      {/* Search & Filter Bar */}
      <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
        <div className="grid md:grid-cols-3 gap-4">
          {/* Search */}
          <div className="md:col-span-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
              <Input
                placeholder="Search by name or email..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
              />
            </div>
          </div>

          {/* Status Filter */}
          <div>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                <SelectValue placeholder="All Statuses" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Statuses</SelectItem>
                <SelectItem value="active">Active</SelectItem>
                <SelectItem value="cancelled">Cancelled</SelectItem>
                <SelectItem value="expired">Expired</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Plan Filter */}
          <div>
            <Select value={planFilter} onValueChange={setPlanFilter}>
              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                <SelectValue placeholder="All Plans" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Plans</SelectItem>
                {plans.map(plan => (
                  <SelectItem key={plan.id} value={plan.id}>{plan.name}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="mt-4 flex items-center justify-between">
          <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
          </div>

          {/* Export Dropdown */}
          {hasPermission('subscriptions.export') && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  disabled={exporting}
                  className="btn-green py-2 flex items-center gap-2"
                >
                  <Download className="h-4 w-4" />
                  {exporting ? 'Exporting...' : 'Export'}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-[var(--neutral-800)] shadow-lg">
                <DropdownMenuItem
                  onClick={() => handleExport('all')}
                  className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                >
                  <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                  <span className="text-[var(--purple-ink)]">Export All Subscriptions</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  onClick={() => handleExport('current')}
                  className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                >
                  <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                  <span className="text-[var(--purple-ink)]">Export Current View</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
        </div>
      </Card>

      {/* Subscriptions Table */}
      <Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
        {/* Mobile Card View */}
        <div className="md:hidden p-4 space-y-4">
          {filteredSubscriptions.length > 0 ? (
            filteredSubscriptions.map((sub) => (
              <Card key={sub.id} className="p-4 border border-[var(--neutral-800)] bg-[var(--lavender-400)]/30">
                <div className="space-y-3">
                  {/* Member Info */}
                  <div className="flex justify-between items-start border-b border-[var(--neutral-800)] pb-3">
                    <div className="flex-1">
                      <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                        {sub.user.first_name} {sub.user.last_name}
                      </p>
                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        {sub.user.email}
                      </p>
                    </div>
                    <StatusBadge status={sub.status} />
                  </div>

                  {/* Plan & Period */}
                  <div className="grid grid-cols-2 gap-3 text-sm">
                    <div>
                      <p className="text-xs text-brand-purple  mb-1">Plan</p>
                      <p className="font-medium text-[var(--purple-ink)]">{sub.plan.name}</p>
                      <p className="text-xs text-brand-purple ">{sub.plan.billing_cycle}</p>
                    </div>
                    <div>
                      <p className="text-xs text-brand-purple  mb-1">Period</p>
                      <p className="text-[var(--purple-ink)]">
                        {new Date(sub.current_period_start).toLocaleDateString()} -
                        {new Date(sub.current_period_end).toLocaleDateString()}
                      </p>
                    </div>
                  </div>

                  {/* Pricing */}
                  <div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
                    <div>
                      <p className="text-xs text-brand-purple  mb-1">Base Fee</p>
                      <p className="font-medium text-[var(--purple-ink)]">
                        ${(sub.base_fee_cents / 100).toFixed(2)}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs text-brand-purple  mb-1">Donation</p>
                      <p className="font-medium text-[var(--purple-ink)]">
                        ${(sub.donation_cents / 100).toFixed(2)}
                      </p>
                    </div>
                    <div>
                      <p className="text-xs text-brand-purple  mb-1">Total</p>
                      <p className="font-semibold text-[var(--purple-ink)]">
                        ${(sub.total_cents / 100).toFixed(2)}
                      </p>
                    </div>
                  </div>

                  {/* Actions */}
                  <div className="flex gap-2 pt-2">
                    {hasPermission('subscriptions.edit') && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleEdit(sub)}
                        className="flex-1 text-brand-purple  hover:bg-[var(--neutral-800)]"
                      >
                        <Edit className="h-4 w-4 mr-2" />
                        Edit
                      </Button>
                    )}
                    {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                      <Button
                        size="sm"
                        variant="outline-destructive"
                        onClick={() => handleCancelSubscription(sub.id)}
                        className="flex-1 "
                      >
                        <XCircle className="h-4 w-4 mr-2" />
                        Cancel
                      </Button>
                    )}
                  </div>
                </div>
              </Card>
            ))
          ) : (
            <div className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              No subscriptions found
            </div>
          )}
        </div>

        {/* Desktop Table View */}
        <div className="hidden md:block overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Member
                </th>
                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Plan
                </th>
                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Status
                </th>
                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Period
                </th>
                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Base Fee
                </th>
                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Donation
                </th>
                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Total
                </th>
                <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Details
                </th>
                <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Actions
                </th>
              </tr>
            </thead>
            <tbody>
              {filteredSubscriptions.length > 0 ? (
                filteredSubscriptions.map((sub) => {
                  const isExpanded = expandedRows.has(sub.id);
                  return (
                    <React.Fragment key={sub.id}>
                      <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
                        <td className="p-4">
                          <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                            {sub.user.first_name} {sub.user.last_name}
                          </div>
                          <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                            {sub.user.email}
                          </div>
                        </td>
                        <td className="p-4">
                          <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                            {sub.plan.name}
                          </div>
                          <div className="text-xs text-brand-purple ">
                            {sub.plan.billing_cycle}
                          </div>
                        </td>
                        <td className="p-4">
                          <StatusBadge status={sub.status} />

                        </td>
                        <td className="p-4">
                          <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                            <div>{formatDate(sub.start_date)}</div>
                            <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
                          </div>
                        </td>
                        <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                          {formatPrice(sub.base_subscription_cents || 0)}
                        </td>
                        <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                          {formatPrice(sub.donation_cents || 0)}
                        </td>
                        <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                          {formatPrice(sub.amount_paid_cents || 0)}
                        </td>
                        <td className="p-4">
                          <Button
                            size="sm"
                            variant="ghost"
                            onClick={() => toggleRowExpansion(sub.id)}
                            className="text-brand-purple  hover:bg-[var(--neutral-800)]"
                          >
                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                          </Button>
                        </td>
                        <td className="p-4">
                          <div className="flex items-center justify-center gap-2">
                            {hasPermission('subscriptions.edit') && (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() => handleEdit(sub)}
                                className="text-brand-purple  hover:bg-[var(--neutral-800)]"
                              >
                                <Edit className="h-4 w-4" />
                              </Button>
                            )}
                            {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                              <Button
                                size="sm"
                                variant="outline-destructive"
                                onClick={() => handleCancelSubscription(sub.id)}
                                className=""
                              >
                                <XCircle className="h-4 w-4" />
                              </Button>
                            )}
                          </div>
                        </td>
                      </tr>
                      {/* Expandable Details Row */}
                      {isExpanded && (
                        <tr className="bg-[var(--lavender-400)]/30">
                          <td colSpan="9" className="p-6">
                            <div className="space-y-4">
                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                                Transaction Details
                              </h4>
                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                {/* Payment Information */}
                                <div className="space-y-3">
                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                                    <CreditCard className="h-4 w-4" />
                                    Payment Information
                                  </h5>
                                  <div className="space-y-2 text-sm">
                                    {sub.payment_completed_at && (
                                      <div className="flex justify-between">
                                        <span className="text-brand-purple ">Payment Date:</span>
                                        <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
                                      </div>
                                    )}
                                    {sub.payment_method && (
                                      <div className="flex justify-between">
                                        <span className="text-brand-purple ">Payment Method:</span>
                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
                                      </div>
                                    )}
                                    {sub.card_brand && sub.card_last4 && (
                                      <div className="flex justify-between">
                                        <span className="text-brand-purple ">Card:</span>
                                        <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
                                      </div>
                                    )}
                                  </div>
                                </div>

                                {/* Stripe Transaction IDs */}
                                <div className="space-y-3">
                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                                    <Info className="h-4 w-4" />
                                    Stripe Transaction IDs
                                  </h5>
                                  <div className="space-y-2 text-sm">
                                    {sub.stripe_payment_intent_id && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Payment Intent:</span>
                                        <div className="flex items-center gap-1">
                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
                                            {sub.stripe_payment_intent_id.substring(0, 20)}...
                                          </code>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
                                          >
                                            <Copy className="h-3 w-3" />
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {sub.stripe_charge_id && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Charge ID:</span>
                                        <div className="flex items-center gap-1">
                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
                                            {sub.stripe_charge_id.substring(0, 20)}...
                                          </code>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
                                          >
                                            <Copy className="h-3 w-3" />
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {sub.stripe_subscription_id && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Subscription ID:</span>
                                        <div className="flex items-center gap-1">
                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
                                            {sub.stripe_subscription_id.substring(0, 20)}...
                                          </code>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
                                          >
                                            <Copy className="h-3 w-3" />
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {sub.stripe_invoice_id && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Invoice ID:</span>
                                        <div className="flex items-center gap-1">
                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
                                            {sub.stripe_invoice_id.substring(0, 20)}...
                                          </code>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
                                          >
                                            <Copy className="h-3 w-3" />
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {sub.stripe_customer_id && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Customer ID:</span>
                                        <div className="flex items-center gap-1">
                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
                                            {sub.stripe_customer_id.substring(0, 20)}...
                                          </code>
                                          <Button
                                            size="sm"
                                            variant="ghost"
                                            onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
                                          >
                                            <Copy className="h-3 w-3" />
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {sub.stripe_receipt_url && (
                                      <div className="flex items-center justify-between gap-2">
                                        <span className="text-brand-purple ">Receipt:</span>
                                        <Button
                                          size="sm"
                                          variant="outline"
                                          onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
                                          className="text-brand-purple  hover:bg-[var(--neutral-800)]"
                                        >
                                          <ExternalLink className="h-3 w-3 mr-1" />
                                          View Receipt
                                        </Button>
                                      </div>
                                    )}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                      )}
                    </React.Fragment>
                  );
                })
              ) : (
                <tr>
                  <td colSpan="9" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                    No subscriptions found
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Edit Subscription Dialog */}
      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
        <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
              Edit Subscription
            </DialogTitle>
            <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-6 py-4">
            {/* Status */}
            <div className="space-y-2">
              <Label htmlFor="status" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                Status
              </Label>
              <Select
                value={editFormData.status}
                onValueChange={(value) => setEditFormData({ ...editFormData, status: value })}
              >
                <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="cancelled">Cancelled</SelectItem>
                  <SelectItem value="expired">Expired</SelectItem>
                </SelectContent>
              </Select>

              {/* Warning Box - Show when status is different */}
              {selectedSubscription && editFormData.status !== selectedSubscription.status && (
                <div className={`mt-3 p-4 rounded-xl border-2 ${editFormData.status === 'cancelled'
                  ? 'bg-red-50 border-red-300'
                  : editFormData.status === 'expired'
                    ? 'bg-orange-50 border-orange-300'
                    : 'bg-green-50 border-green-300'
                  }`}>
                  <div className="flex items-start gap-3">
                    {editFormData.status === 'cancelled' || editFormData.status === 'expired' ? (
                      <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
                    ) : (
                      <Info className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" />
                    )}
                    <div className="flex-1">
                      <p className="font-semibold text-sm mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                        {editFormData.status === 'cancelled' && 'Critical: This will cancel the subscription'}
                        {editFormData.status === 'expired' && 'Warning: This will mark subscription as expired'}
                        {editFormData.status === 'active' && 'This will activate the subscription'}
                      </p>
                      <ul className="text-xs space-y-1 list-disc list-inside" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                        {editFormData.status === 'cancelled' && (
                          <>
                            <li>User status will be set to INACTIVE</li>
                            <li>Member access will be removed immediately</li>
                            <li>All future billing will be stopped</li>
                          </>
                        )}
                        {editFormData.status === 'expired' && (
                          <>
                            <li>User status will be set to INACTIVE</li>
                            <li>Member access will be removed</li>
                            <li>Subscription will be marked as ended</li>
                          </>
                        )}
                        {editFormData.status === 'active' && (
                          <>
                            <li>User status will be set to ACTIVE</li>
                            <li>Full member access will be granted</li>
                            <li>Billing will resume if applicable</li>
                          </>
                        )}
                      </ul>
                      <p className="text-xs mt-2 font-medium">
                        Current: <span className="font-bold">{selectedSubscription.status.toUpperCase()}</span> →
                        New: <span className="font-bold">{editFormData.status.toUpperCase()}</span>
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* End Date */}
            <div className="space-y-2">
              <Label htmlFor="end_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                End Date
              </Label>
              <div className="relative">
                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
                <Input
                  id="end_date"
                  type="date"
                  value={editFormData.end_date}
                  onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
                  className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                />
              </div>
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => setEditDialogOpen(false)}
              className="rounded-full border-2 border-[var(--neutral-800)]"
              disabled={isUpdating}
            >
              Cancel
            </Button>
            <Button
              type="button"
              onClick={handleSaveSubscription}
              disabled={isUpdating}
              className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)] rounded-full"
            >
              {isUpdating ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Saving...
                </>
              ) : (
                'Save Changes'
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default AdminSubscriptions;