/**
 * Admin Billing Management Page
 * Admin-only interface for managing credits, billing, and user accounts
 */
import React, { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import ComponentCard from '../../components/common/ComponentCard';
import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import Button from '../../components/ui/button/Button';
import Badge from '../../components/ui/badge/Badge';
import { 
  BoltIcon, 
  UserIcon, 
  DollarLineIcon, 
  PlugInIcon,
  CheckCircleIcon,
  TimeIcon
} from '../../icons';

interface UserAccount {
  id: number;
  email: string;
  username?: string;
  account_name?: string;
  credits: number;
  subscription_plan?: string;
  is_active: boolean;
  date_joined: string;
}

interface CreditCostConfig {
  id: number;
  operation_type: string;
  display_name: string;
  credits_cost: number;
  unit?: string;
  description?: string;
  is_active: boolean;
  created_at: string;
}

interface CreditPackageItem {
  id: number;
  name: string;
  slug: string;
  credits: number;
  price: string;
  discount_percentage: number;
  is_featured: boolean;
  description?: string;
  is_active?: boolean;
  sort_order?: number;
}

interface SystemStats {
  total_users: number;
  active_users: number;
  total_credits_issued: number;
  total_credits_used: number;
}

const AdminBilling: React.FC = () => {
  const toast = useToast();
  const [stats, setStats] = useState<SystemStats | null>(null);
  const [users, setUsers] = useState<UserAccount[]>([]);
  const [creditConfigs, setCreditConfigs] = useState<CreditCostConfig[]>([]);
  const [creditPackages, setCreditPackages] = useState<CreditPackageItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<'overview' | 'users' | 'pricing' | 'packages'>('overview');
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedUser, setSelectedUser] = useState<UserAccount | null>(null);
  const [creditAmount, setCreditAmount] = useState('');
  const [adjustmentReason, setAdjustmentReason] = useState('');

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

  const loadData = async () => {
    try {
      setLoading(true);
      const [statsData, usersData, configsData] = await Promise.all([
        // Admin billing stats (modules admin endpoints)
        fetchAPI('/v1/admin/billing/stats/'),
        // Admin users with credits
        fetchAPI('/v1/admin/users/'),
        // Admin credit costs (modules billing)
        fetchAPI('/v1/admin/credit-costs/'),
      ]);
      const packagesData = await fetchAPI('/v1/billing/credit-packages/');
      
      setStats(statsData);
      setUsers(usersData.results || []);
      setCreditConfigs(configsData.results || []);
      setCreditPackages(packagesData.results || []);
    } catch (error: any) {
      toast?.error(error?.message || 'Failed to load admin data');
    } finally {
      setLoading(false);
    }
  };

  const handleAdjustCredits = async () => {
    if (!selectedUser || !creditAmount) {
      toast?.error('Please select a user and enter amount');
      return;
    }

    try {
      await fetchAPI(`/v1/admin/users/${selectedUser.id}/adjust-credits/`, {
        method: 'POST',
        body: JSON.stringify({
          amount: parseInt(creditAmount),
          reason: adjustmentReason || 'Admin adjustment',
        }),
      });

      toast?.success(`Credits adjusted for ${selectedUser.username}`);
      setCreditAmount('');
      setAdjustmentReason('');
      setSelectedUser(null);
      loadData();
    } catch (error: any) {
      toast?.error(error?.message || 'Failed to adjust credits');
    }
  };

  const handleUpdateCreditCost = async (configId: number, newCost: number) => {
    try {
      await fetchAPI('/v1/admin/credit-costs/', {
        method: 'POST',
        body: JSON.stringify({ updates: [{ id: configId, cost: newCost }] }),
      });

      toast?.success('Credit cost updated successfully');
      loadData();
    } catch (error: any) {
      toast?.error(error?.message || 'Failed to update credit cost');
    }
  };

  const filteredUsers = users.filter(user =>
    (user.email || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
    (user.username || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
    (user.account_name || '').toLowerCase().includes(searchTerm.toLowerCase())
  );

  const formatLabel = (value?: string) =>
    (value || '')
      .split('_')
      .map((w) => (w ? w[0].toUpperCase() + w.slice(1) : ''))
      .join(' ')
      .trim();

  const updateLocalCost = (id: number, value: string) => {
    setCreditConfigs((prev) =>
      prev.map((c) =>
        c.id === id ? { ...c, credits_cost: value === '' ? ('' as any) : Number(value) } : c
      )
    );
  };

  if (loading) {
    return (
      <div className="p-6">
        <PageMeta title="Admin - Billing Management" description="Manage billing and credits" />
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading admin data...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <PageMeta title="Admin - Billing Management" description="Manage billing and credits" />
      
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Billing Management</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Admin controls for credits, pricing, and user billing
          </p>
        </div>
        <Button
          variant="outline"
          startIcon={<PlugInIcon className="w-4 h-4" />}
          onClick={() => window.open('/admin/igny8_core/', '_blank')}
        >
          Django Admin
        </Button>
      </div>

      {/* System Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <EnhancedMetricCard
          title="Total Users"
          value={stats?.total_users || 0}
          icon={<UserIcon />}
          accentColor="blue"
        />
        <EnhancedMetricCard
          title="Active Users"
          value={stats?.active_users || 0}
          icon={<CheckCircleIcon />}
          accentColor="green"
        />
        <EnhancedMetricCard
          title="Credits Issued"
          value={stats?.total_credits_issued || 0}
          icon={<DollarLineIcon />}
          accentColor="orange"
        />
        <EnhancedMetricCard
          title="Credits Used"
          value={stats?.total_credits_used || 0}
          icon={<BoltIcon />}
          accentColor="purple"
        />
      </div>

      {/* Tabs */}
      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => setActiveTab('overview')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'overview'
                ? 'border-primary-500 text-primary-600 dark:text-primary-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            Overview
          </button>
          <button
            onClick={() => setActiveTab('users')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'users'
                ? 'border-primary-500 text-primary-600 dark:text-primary-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            User Management ({users.length})
          </button>
          <button
            onClick={() => setActiveTab('pricing')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'pricing'
                ? 'border-primary-500 text-primary-600 dark:text-primary-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            Credit Pricing ({creditConfigs.length})
          </button>
          <button
            onClick={() => setActiveTab('packages')}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'packages'
                ? 'border-primary-500 text-primary-600 dark:text-primary-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            Credit Packages ({creditPackages.length})
          </button>
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'overview' && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ComponentCard title="Quick Actions">
            <div className="space-y-3">
              <Button
                variant="primary"
                fullWidth
                startIcon={<UserIcon className="w-4 h-4" />}
                onClick={() => setActiveTab('users')}
              >
                Manage User Credits
              </Button>
              <Button
                variant="secondary"
                fullWidth
                startIcon={<DollarLineIcon className="w-4 h-4" />}
                onClick={() => setActiveTab('pricing')}
              >
                Update Credit Costs
              </Button>
              <Button
                variant="outline"
                fullWidth
                startIcon={<PlugInIcon className="w-4 h-4" />}
                onClick={() => window.open('/admin/igny8_core/creditcostconfig/', '_blank')}
              >
                Full Admin Panel
              </Button>
            </div>
          </ComponentCard>

          <ComponentCard title="Recent Activity">
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              Activity log coming soon
            </div>
          </ComponentCard>
        </div>
      )}

      {activeTab === 'users' && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <ComponentCard title="User Accounts">
              <div className="mb-4">
                <input
                  type="text"
                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="Search by username or email..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                  <thead className="bg-gray-50 dark:bg-gray-800">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                        User
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                        Plan
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                        Credits
                      </th>
                      <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                    {filteredUsers.map((user) => (
                      <tr key={user.id}>
                        <td className="px-4 py-4">
                          <div className="text-sm font-medium text-gray-900 dark:text-white">
                            {user.username}
                          </div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">
                            {user.email}
                          </div>
                        </td>
                        <td className="px-4 py-4 whitespace-nowrap">
                          <Badge tone="info">{user.subscription_plan || 'Free'}</Badge>
                        </td>
                        <td className="px-4 py-4 whitespace-nowrap text-right font-bold text-amber-600 dark:text-amber-400">
                          {user.credits}
                        </td>
                        <td className="px-4 py-4 whitespace-nowrap text-center">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setSelectedUser(user)}
                          >
                            Adjust
                          </Button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </ComponentCard>
          </div>

          <div>
            <ComponentCard title="Adjust Credits">
              {selectedUser ? (
                <div className="space-y-4">
                  <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                      {selectedUser.username}
                    </div>
                    <div className="text-xs text-gray-600 dark:text-gray-400">
                      Current: {selectedUser.credits} credits
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount</label>
                    <input
                      type="number"
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="Enter credits (use - for deduction)"
                      value={creditAmount}
                      onChange={(e) => setCreditAmount(e.target.value)}
                    />
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason</label>
                    <input
                      type="text"
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
                      placeholder="e.g., Bonus credits, Refund, etc."
                      value={adjustmentReason}
                      onChange={(e) => setAdjustmentReason(e.target.value)}
                    />
                  </div>

                  <div className="flex gap-2">
                    <Button
                      variant="primary"
                      fullWidth
                      onClick={handleAdjustCredits}
                    >
                      Apply Adjustment
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => {
                        setSelectedUser(null);
                        setCreditAmount('');
                        setAdjustmentReason('');
                      }}
                    >
                      Cancel
                    </Button>
                  </div>
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                  Select a user to adjust credits
                </div>
              )}
            </ComponentCard>
          </div>
        </div>
      )}

      {activeTab === 'pricing' && (
        <ComponentCard title="Credit Cost Configuration">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead className="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Operation
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Display Name
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Credits Cost
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Unit
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Description
                  </th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                {creditConfigs.map((config) => (
                  <tr key={config.id}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-700 dark:text-gray-300">
                      {config.operation_type}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                      {config.display_name || formatLabel(config.operation_type)}
                    </td>
                    <td className="px-6 py-4">
                      <input
                        type="number"
                        value={config.credits_cost as any}
                        onChange={(e) => updateLocalCost(config.id, e.target.value)}
                        className="w-24 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
                      />
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                      {formatLabel(config.unit)}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400 max-w-md">
                      {config.description || '—'}
                    </td>
                    <td className="px-6 py-4 text-right">
                      <Button
                        size="sm"
                        variant="primary"
                        tone="brand"
                        onClick={() => handleUpdateCreditCost(config.id, Number(config.credits_cost) || 0)}
                      >
                        Save
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </ComponentCard>
      )}

      {activeTab === 'packages' && (
        <ComponentCard title="Credit Packages">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {creditPackages.map((pkg) => (
              <ComponentCard key={pkg.id} title={pkg.name} desc={pkg.description || ''}>
                <div className="space-y-3">
                  <div className="text-3xl font-bold text-blue-600">{pkg.credits.toLocaleString()}</div>
                  <div className="text-sm text-gray-500">credits</div>
                  <div className="text-2xl font-semibold text-gray-900 dark:text-white">${pkg.price}</div>
                  {pkg.discount_percentage > 0 && (
                    <div className="text-sm text-green-600">Save {pkg.discount_percentage}%</div>
                  )}
                  <div className="flex items-center gap-2">
                    <Badge variant="light" color={pkg.is_active ? 'success' : 'warning'}>
                      {pkg.is_active ? 'Active' : 'Inactive'}
                    </Badge>
                    {pkg.is_featured && (
                      <Badge variant="light" color="primary">
                        Featured
                      </Badge>
                    )}
                  </div>
                </div>
              </ComponentCard>
            ))}
            {creditPackages.length === 0 && (
              <div className="col-span-3 text-center py-8 text-gray-500">No credit packages found.</div>
            )}
          </div>
        </ComponentCard>
      )}
    </div>
  );
};

export default AdminBilling;