'use client';

import { useState, useEffect } from 'react';
import { adminUserApi, AdminUser } from '@/lib/api';

type TabType = 'active' | 'deleted';

interface DeletedUser extends AdminUser {
  deleted_at?: string;
  withdrawal_reason?: string;
}

export default function AdminUsersPage() {
  const [activeTab, setActiveTab] = useState<TabType>('active');

  // Active users state
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(20);
  const [search, setSearch] = useState('');
  const [filterDealer, setFilterDealer] = useState<boolean | undefined>(undefined);
  const [loading, setLoading] = useState(true);

  // Deleted users state
  const [deletedUsers, setDeletedUsers] = useState<DeletedUser[]>([]);
  const [deletedTotal, setDeletedTotal] = useState(0);
  const [deletedPage, setDeletedPage] = useState(1);
  const [deletedSearch, setDeletedSearch] = useState('');
  const [deletedLoading, setDeletedLoading] = useState(true);

  // Modal state
  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
  const [showCCModal, setShowCCModal] = useState(false);
  const [ccAmount, setCCAmount] = useState('');
  const [ccReason, setCCReason] = useState('');

  // Delete modal state
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteUser, setDeleteUser] = useState<AdminUser | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [hardDelete, setHardDelete] = useState(false);

  // Restore state
  const [restoreLoading, setRestoreLoading] = useState<number | null>(null);

  useEffect(() => {
    if (activeTab === 'active') {
      loadUsers();
    } else {
      loadDeletedUsers();
    }
  }, [page, filterDealer, activeTab, deletedPage]);

  const loadUsers = async () => {
    try {
      setLoading(true);
      const response = await adminUserApi.getUsers({
        page,
        page_size: pageSize,
        search: search || undefined,
        is_dealer: filterDealer,
      });
      setUsers(response.users);
      setTotal(response.total);
    } catch (error) {
      console.error('Failed to load users:', error);
    } finally {
      setLoading(false);
    }
  };

  const loadDeletedUsers = async () => {
    try {
      setDeletedLoading(true);
      const response = await adminUserApi.getDeletedUsers({
        page: deletedPage,
        page_size: pageSize,
        search: deletedSearch || undefined,
      });
      setDeletedUsers(response.users);
      setDeletedTotal(response.total);
    } catch (error) {
      console.error('Failed to load deleted users:', error);
    } finally {
      setDeletedLoading(false);
    }
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setPage(1);
    loadUsers();
  };

  const handleDeletedSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setDeletedPage(1);
    loadDeletedUsers();
  };

  const handleAdjustCC = async () => {
    if (!selectedUser || !ccAmount) return;

    try {
      const result = await adminUserApi.adjustCC(
        selectedUser.id,
        parseFloat(ccAmount),
        ccReason || 'Admin adjustment'
      );
      alert(`CC adjusted! New balance: ${result.new_balance}`);
      setShowCCModal(false);
      setCCAmount('');
      setCCReason('');
      loadUsers();
    } catch (error) {
      console.error('Failed to adjust CC:', error);
      alert('Failed to adjust CC');
    }
  };

  const handleDeleteUser = async () => {
    if (!deleteUser) return;

    setDeleteLoading(true);
    try {
      const result = await adminUserApi.deleteUser(deleteUser.id, hardDelete);
      alert(result.message);
      setShowDeleteModal(false);
      setDeleteUser(null);
      setHardDelete(false);
      loadUsers();
      loadDeletedUsers();
    } catch (error: any) {
      console.error('Failed to delete user:', error);
      alert(error.response?.data?.detail || 'Failed to delete user');
    } finally {
      setDeleteLoading(false);
    }
  };

  const handleRestoreUser = async (userId: number) => {
    if (!confirm('Are you sure you want to restore this user?')) return;

    setRestoreLoading(userId);
    try {
      const result = await adminUserApi.restoreUser(userId);
      alert(result.message);
      loadDeletedUsers();
      loadUsers();
    } catch (error: any) {
      console.error('Failed to restore user:', error);
      alert(error.response?.data?.detail || 'Failed to restore user');
    } finally {
      setRestoreLoading(null);
    }
  };

  const handlePermanentDelete = async (user: DeletedUser) => {
    if (!confirm(`Are you sure you want to PERMANENTLY delete ${user.email}? This cannot be undone!`)) return;

    setRestoreLoading(user.id);
    try {
      const result = await adminUserApi.deleteUser(user.id, true);
      alert(result.message);
      loadDeletedUsers();
    } catch (error: any) {
      console.error('Failed to permanently delete user:', error);
      alert(error.response?.data?.detail || 'Failed to delete user');
    } finally {
      setRestoreLoading(null);
    }
  };

  const formatDate = (dateStr?: string) => {
    if (!dateStr) return '-';
    return new Date(dateStr).toLocaleDateString('ko-KR', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const totalPages = Math.ceil(total / pageSize);
  const deletedTotalPages = Math.ceil(deletedTotal / pageSize);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-800">User Management</h1>
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => { setActiveTab('active'); setPage(1); }}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'active'
                ? 'border-primary-500 text-primary-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            Active Users
            <span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
              activeTab === 'active' ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
            }`}>
              {total}
            </span>
          </button>
          <button
            onClick={() => { setActiveTab('deleted'); setDeletedPage(1); }}
            className={`py-4 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'deleted'
                ? 'border-red-500 text-red-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
          >
            Deleted Users
            <span className={`ml-2 py-0.5 px-2 rounded-full text-xs ${
              activeTab === 'deleted' ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'
            }`}>
              {deletedTotal}
            </span>
          </button>
        </nav>
      </div>

      {/* Active Users Tab */}
      {activeTab === 'active' && (
        <>
          {/* Search & Filter */}
          <div className="bg-white rounded-xl shadow-sm p-4">
            <form onSubmit={handleSearch} className="flex flex-wrap gap-4">
              <div className="flex-1 min-w-[200px]">
                <input
                  type="text"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Search by email, name, or phone..."
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>
              <select
                value={filterDealer === undefined ? '' : filterDealer ? 'true' : 'false'}
                onChange={(e) => {
                  if (e.target.value === '') setFilterDealer(undefined);
                  else setFilterDealer(e.target.value === 'true');
                  setPage(1);
                }}
                className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
              >
                <option value="">All Users</option>
                <option value="true">Dealers Only</option>
                <option value="false">Non-Dealers</option>
              </select>
              <button
                type="submit"
                className="px-6 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600"
              >
                Search
              </button>
            </form>
          </div>

          {/* Users Table */}
          <div className="bg-white rounded-xl shadow-sm overflow-hidden">
            {loading ? (
              <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
              </div>
            ) : users.length === 0 ? (
              <div className="text-center py-12 text-gray-500">
                No users found
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Country</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">CC Balance</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Referral</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Promo Interest</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Registered</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {users.map((user) => (
                      <tr key={user.id} className="hover:bg-gray-50">
                        <td className="px-4 py-3 text-sm text-gray-800">{user.id}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.email}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.name || '-'}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.phone || '-'}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.country || '-'}</td>
                        <td className="px-4 py-3 text-sm font-semibold text-blue-600">
                          {user.cc_balance.toLocaleString()} CC
                        </td>
                        <td className="px-4 py-3 text-sm">
                          {user.is_dealer ? (
                            <span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Dealer</span>
                          ) : (
                            <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">User</span>
                          )}
                        </td>
                        <td className="px-4 py-3 text-sm text-gray-500">
                          <div className="text-xs">
                            <div>Code: {user.referral_code || '-'}</div>
                            {user.referred_by && <div className="text-blue-500">By: {user.referred_by}</div>}
                          </div>
                        </td>
                        <td className="px-4 py-3 text-sm">
                          {user.promo_preferred_maker || user.promo_preferred_model ? (
                            <div className="text-xs">
                              <div className="font-medium text-purple-700">
                                {user.promo_preferred_maker || '-'} / {user.promo_preferred_model || '-'}
                              </div>
                              {user.promo_email_enabled && (
                                <span className="inline-flex items-center px-1.5 py-0.5 mt-1 rounded text-xs bg-green-100 text-green-700">
                                  Email Alert ON
                                </span>
                              )}
                            </div>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </td>
                        <td className="px-4 py-3 text-sm text-gray-500">
                          {formatDate(user.created_at)}
                        </td>
                        <td className="px-4 py-3 text-sm">
                          <div className="flex gap-2">
                            <button
                              onClick={() => {
                                setSelectedUser(user);
                                setShowCCModal(true);
                              }}
                              className="px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"
                            >
                              Adjust CC
                            </button>
                            <button
                              onClick={() => {
                                setDeleteUser(user);
                                setShowDeleteModal(true);
                              }}
                              className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
                            >
                              Delete
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="flex items-center justify-between px-4 py-3 border-t">
                <div className="text-sm text-gray-500">
                  Page {page} of {totalPages}
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() => setPage(p => Math.max(1, p - 1))}
                    disabled={page === 1}
                    className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
                  >
                    Previous
                  </button>
                  <button
                    onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                    disabled={page === totalPages}
                    className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* Deleted Users Tab */}
      {activeTab === 'deleted' && (
        <>
          {/* Search */}
          <div className="bg-white rounded-xl shadow-sm p-4">
            <form onSubmit={handleDeletedSearch} className="flex flex-wrap gap-4">
              <div className="flex-1 min-w-[200px]">
                <input
                  type="text"
                  value={deletedSearch}
                  onChange={(e) => setDeletedSearch(e.target.value)}
                  placeholder="Search deleted users by email, name, or phone..."
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
                />
              </div>
              <button
                type="submit"
                className="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
              >
                Search
              </button>
            </form>
          </div>

          {/* Deleted Users Table */}
          <div className="bg-white rounded-xl shadow-sm overflow-hidden">
            {deletedLoading ? (
              <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-red-500"></div>
              </div>
            ) : deletedUsers.length === 0 ? (
              <div className="text-center py-12 text-gray-500">
                No deleted users found
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-red-50">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">ID</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Email</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Name</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Phone</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">CC Balance</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Deleted At</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Reason</th>
                      <th className="px-4 py-3 text-left text-xs font-medium text-red-600 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {deletedUsers.map((user) => (
                      <tr key={user.id} className="hover:bg-red-50">
                        <td className="px-4 py-3 text-sm text-gray-800">{user.id}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.email}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.name || '-'}</td>
                        <td className="px-4 py-3 text-sm text-gray-800">{user.phone || '-'}</td>
                        <td className="px-4 py-3 text-sm font-semibold text-blue-600">
                          {user.cc_balance.toLocaleString()} CC
                        </td>
                        <td className="px-4 py-3 text-sm text-red-600">
                          {formatDate(user.deleted_at)}
                        </td>
                        <td className="px-4 py-3 text-sm text-gray-500 max-w-[200px] truncate">
                          {user.withdrawal_reason || '-'}
                        </td>
                        <td className="px-4 py-3 text-sm">
                          <div className="flex gap-2">
                            <button
                              onClick={() => handleRestoreUser(user.id)}
                              disabled={restoreLoading === user.id}
                              className="px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
                            >
                              {restoreLoading === user.id ? 'Restoring...' : 'Restore'}
                            </button>
                            <button
                              onClick={() => handlePermanentDelete(user)}
                              disabled={restoreLoading === user.id}
                              className="px-3 py-1 text-xs bg-red-700 text-white rounded hover:bg-red-800 disabled:opacity-50"
                            >
                              Permanent Delete
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}

            {/* Pagination */}
            {deletedTotalPages > 1 && (
              <div className="flex items-center justify-between px-4 py-3 border-t">
                <div className="text-sm text-gray-500">
                  Page {deletedPage} of {deletedTotalPages}
                </div>
                <div className="flex gap-2">
                  <button
                    onClick={() => setDeletedPage(p => Math.max(1, p - 1))}
                    disabled={deletedPage === 1}
                    className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
                  >
                    Previous
                  </button>
                  <button
                    onClick={() => setDeletedPage(p => Math.min(deletedTotalPages, p + 1))}
                    disabled={deletedPage === deletedTotalPages}
                    className="px-3 py-1 border rounded hover:bg-gray-50 disabled:opacity-50"
                  >
                    Next
                  </button>
                </div>
              </div>
            )}
          </div>
        </>
      )}

      {/* CC Adjustment Modal */}
      {showCCModal && selectedUser && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-semibold mb-4">Adjust CC Balance</h3>
            <div className="mb-4">
              <p className="text-sm text-gray-600">User: {selectedUser.email}</p>
              <p className="text-sm text-gray-600">Current Balance: {selectedUser.cc_balance.toLocaleString()} CC</p>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Amount (positive to add, negative to subtract)
                </label>
                <input
                  type="number"
                  value={ccAmount}
                  onChange={(e) => setCCAmount(e.target.value)}
                  placeholder="e.g., 100 or -50"
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Reason (optional)
                </label>
                <input
                  type="text"
                  value={ccReason}
                  onChange={(e) => setCCReason(e.target.value)}
                  placeholder="e.g., Bonus credit, Refund, etc."
                  className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>
            </div>
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => {
                  setShowCCModal(false);
                  setCCAmount('');
                  setCCReason('');
                }}
                className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                onClick={handleAdjustCC}
                disabled={!ccAmount}
                className="flex-1 px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 disabled:opacity-50"
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Delete User Modal */}
      {showDeleteModal && deleteUser && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 w-full max-w-md mx-4">
            <h3 className="text-lg font-semibold text-red-600 mb-4">Delete User</h3>

            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
              <p className="text-red-700 text-sm">
                Are you sure you want to delete this user?
              </p>
            </div>

            <div className="mb-4 space-y-2">
              <p className="text-sm text-gray-600"><span className="font-medium">Email:</span> {deleteUser.email}</p>
              <p className="text-sm text-gray-600"><span className="font-medium">Name:</span> {deleteUser.name || '-'}</p>
              <p className="text-sm text-gray-600"><span className="font-medium">CC Balance:</span> {deleteUser.cc_balance.toLocaleString()} CC</p>
            </div>

            <div className="mb-4">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={hardDelete}
                  onChange={(e) => setHardDelete(e.target.checked)}
                  className="w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
                />
                <span className="text-sm text-gray-700">
                  Permanently delete (cannot be recovered)
                </span>
              </label>
              <p className="text-xs text-gray-500 mt-1 ml-6">
                {hardDelete
                  ? 'User and all related data will be permanently deleted from the database.'
                  : 'User will be soft deleted (can be restored from Deleted Users tab).'}
              </p>
            </div>

            <div className="flex gap-3 mt-6">
              <button
                onClick={() => {
                  setShowDeleteModal(false);
                  setDeleteUser(null);
                  setHardDelete(false);
                }}
                className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                onClick={handleDeleteUser}
                disabled={deleteLoading}
                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
              >
                {deleteLoading ? 'Deleting...' : (hardDelete ? 'Delete Permanently' : 'Delete')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}