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,
  Repeat,
  ChevronDown,
  ChevronUp,



  ExternalLink,
  Copy
} from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '../../components/ui/dropdown-menu';
import StatusBadge from '@/components/StatusBadge';
import CreateSubscriptionDialog from '@/components/CreateSubscriptionDialog';
import SubscriptionsTable from '@/components/admin/SubscriptionsTable';

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());

  //create subsdcription dialog state
  const [createDialogOpen, setCreateDialogOpen] = useState(false);

  // 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 className='flex justify-between'>

          <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>
          {hasPermission('users.create') && (
            <Button
              onClick={() => setCreateDialogOpen(true)}
              className="btn-green "
            >
              <Repeat className="h-5 w-5 mr-2" />
              Create Subscription
            </Button>
          )}
        </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>
          {/* second row */}
          <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">
            <SubscriptionsTable
              subscriptions={filteredSubscriptions}
              expandedRows={expandedRows}
              onToggleRowExpansion={toggleRowExpansion}
              onEdit={handleEdit}
              onCancel={handleCancelSubscription}
              hasPermission={hasPermission}
              formatDate={formatDate}
              formatDateTime={formatDateTime}
              formatPrice={formatPrice}
              copyToClipboard={copyToClipboard}
            />
          </div>
        </Card>

        {/* Edit Subscription Dialog */}
        <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
          <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl overflow-y-auto max-h-[90vh]">
            <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>
      <CreateSubscriptionDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        onSuccess={fetchData}
      />
    </>

  );
};

export default AdminSubscriptions;
