// Team & Resellers Management Page Component (Owner Only)
window.TeamPage = function TeamPage({ user, apps, showToast, onRefreshData }) {
  const [team, setTeam] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  // Modals
  const [showCreateModal, setShowCreateModal] = React.useState(false);
  const [showEditModal, setShowEditModal] = React.useState(false);
  const [showResetPassModal, setShowResetPassModal] = React.useState(false);
  const [showResultModal, setShowResultModal] = React.useState(false);
  const [createdResult, setCreatedResult] = React.useState(null);
  const [copiedKey, setCopiedKey] = React.useState('');
  const [selectedMember, setSelectedMember] = React.useState(null);

  // Create/Edit form states
  const [resellerUser, setResellerUser] = React.useState('');
  const [resellerPass, setResellerPass] = React.useState('');
  const [resellerQuota, setResellerQuota] = React.useState(0);
  const [selectedApps, setSelectedApps] = React.useState([]);
  const [permissions, setPermissions] = React.useState({
    can_create_keys: true,
    can_add_time: true,
    can_reset_hwid: true,
    can_ban_users: false,
    can_freeze_users: false,
    can_delete_users: false,
    can_export_keys: true
  });

  const fetchTeam = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/team', {
        headers: { 'Authorization': `Bearer ${localStorage.getItem('icex_token')}` }
      });
      const data = await res.json();
      if (data.success) {
        setTeam(data.team);
      }
    } catch (err) {
      console.error('Fetch team error:', err);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => {
    fetchTeam();
  }, []);

  const handleAppToggle = (appId) => {
    setSelectedApps((prev) =>
      prev.includes(appId) ? prev.filter(id => id !== appId) : [...prev, appId]
    );
  };

  const handlePermToggle = (permKey) => {
    setPermissions((prev) => ({ ...prev, [permKey]: !prev[permKey] }));
  };

  const openCreateModal = () => {
    setResellerUser('');
    setResellerPass('');
    setResellerQuota(0);
    // Select all apps by default
    setSelectedApps(apps ? apps.map(a => a.id) : []);
    setPermissions({
      can_create_keys: true,
      can_add_time: true,
      can_reset_hwid: true,
      can_ban_users: false,
      can_freeze_users: false,
      can_delete_users: false,
      can_export_keys: true
    });
    setShowCreateModal(true);
  };

  const handleCreateReseller = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('/api/team', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('icex_token')}`
        },
        body: JSON.stringify({
          username: resellerUser,
          password: resellerPass,
          managed_apps: selectedApps,
          permissions,
          max_keys_limit: resellerQuota
        })
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message, 'success');
        setShowCreateModal(false);
        setCreatedResult({
          username: resellerUser,
          password: resellerPass,
          role: 'Reseller',
          apps: selectedApps.map(id => {
            const a = apps.find(x => x.id === id);
            return a ? a.name : id;
          }),
          quota: resellerQuota > 0 ? `${resellerQuota} คีย์` : 'ไม่จำกัด (Unlimited)',
          created_at: new Date().toLocaleString()
        });
        setShowResultModal(true);
        fetchTeam();
      } else {
        showToast(data.message, 'error');
      }
    } catch (err) {
      showToast('Creation error: ' + err.message, 'error');
    }
  };

  const openEditModal = (member) => {
    setSelectedMember(member);
    setSelectedApps(member.managed_apps || []);
    setPermissions({
      can_create_keys: Boolean(member.permissions?.can_create_keys),
      can_add_time: Boolean(member.permissions?.can_add_time),
      can_reset_hwid: Boolean(member.permissions?.can_reset_hwid),
      can_ban_users: Boolean(member.permissions?.can_ban_users),
      can_freeze_users: Boolean(member.permissions?.can_freeze_users),
      can_delete_users: Boolean(member.permissions?.can_delete_users),
      can_export_keys: Boolean(member.permissions?.can_export_keys)
    });
    setResellerQuota(member.max_keys_limit || 0);
    setShowEditModal(true);
  };

  const handleUpdateReseller = async (e) => {
    e.preventDefault();
    if (!selectedMember) return;
    try {
      const res = await fetch(`/api/team/${selectedMember.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('icex_token')}`
        },
        body: JSON.stringify({
          managed_apps: selectedApps,
          permissions,
          max_keys_limit: resellerQuota
        })
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message, 'success');
        setShowEditModal(false);
        fetchTeam();
      } else {
        showToast(data.message, 'error');
      }
    } catch (err) {
      showToast('Update error', 'error');
    }
  };

  const handleToggleStatus = async (member) => {
    const newStatus = member.status === 'active' ? 'suspended' : 'active';
    try {
      const res = await fetch(`/api/team/${member.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('icex_token')}`
        },
        body: JSON.stringify({ status: newStatus })
      });
      const data = await res.json();
      if (data.success) {
        showToast(`Reseller '${member.username}' is now ${newStatus}`, 'success');
        fetchTeam();
      }
    } catch (err) {
      showToast('Error changing status', 'error');
    }
  };

  const handleResetPassword = async (e) => {
    e.preventDefault();
    if (!selectedMember || !resellerPass) return;
    try {
      const res = await fetch(`/api/team/${selectedMember.id}/reset-password`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('icex_token')}`
        },
        body: JSON.stringify({ newPassword: resellerPass })
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message, 'success');
        setShowResetPassModal(false);
        setResellerPass('');
      } else {
        showToast(data.message, 'error');
      }
    } catch (err) {
      showToast('Error resetting password', 'error');
    }
  };

  const handleDeleteMember = async (member) => {
    if (!confirm(`Are you sure you want to delete reseller account '${member.username}'?`)) return;
    try {
      const res = await fetch(`/api/team/${member.id}`, {
        method: 'DELETE',
        headers: { 'Authorization': `Bearer ${localStorage.getItem('icex_token')}` }
      });
      const data = await res.json();
      if (data.success) {
        showToast(data.message, 'success');
        fetchTeam();
      } else {
        showToast(data.message, 'error');
      }
    } catch (err) {
      showToast('Error deleting member', 'error');
    }
  };

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Header Bar */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pb-4 border-b border-[#1E2D4A]">
        <div>
          <h2 className="text-xl font-bold text-white font-brand flex items-center gap-2.5">
            <i className="fa-solid fa-users-gear text-cyan-400"></i>
            <span>Team & Reseller Management (หมวดหมู่จัดการทีมงาน)</span>
          </h2>
          <p className="text-xs text-slate-400 mt-0.5">
            Owner สามารถสร้างบัญชีตัวแทน (Reseller), กำหนดสิทธิ์รายฟังก์ชัน และเลือกแอปที่อนุญาตให้ดูแลได้อย่างอิสระ
          </p>
        </div>

        <button
          onClick={openCreateModal}
          className="px-4 py-2.5 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white font-semibold text-xs transition flex items-center gap-2 border border-[#1D63FF] shrink-0"
        >
          <i className="fa-solid fa-user-plus text-xs"></i>
          <span>Create Reseller Account</span>
        </button>
      </div>

      {/* Resellers Grid / Table */}
      <div className="grid grid-cols-1 gap-4 w-full">
        {team && team.length > 0 ? (
          team.map((member) => (
            <div
              key={member.id}
              className="p-4 sm:p-5 rounded-none bg-[#0E1626] border border-[#1E2D4A] flex flex-col lg:flex-row lg:items-center justify-between gap-4 sm:gap-5 hover:border-blue-500/40 transition min-w-0"
            >
              {/* Member Profile */}
              <div className="space-y-3 flex-1 min-w-0">
                <div className="flex items-center gap-3 min-w-0">
                  <div className="w-10 h-10 rounded-none bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-cyan-400 shrink-0">
                    <i className="fa-solid fa-user-shield text-base"></i>
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-bold text-white text-sm font-brand truncate">{member.username}</span>
                      <span className={`text-[10px] font-mono px-2 py-0.5 rounded-none ${
                        member.status === 'active'
                          ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                          : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'
                      }`}>
                        {member.status.toUpperCase()}
                      </span>
                    </div>
                    <div className="text-[11px] text-slate-500 font-mono truncate">
                      ID: {member.id} &bull; Created: {new Date(member.created_at).toLocaleDateString()}
                    </div>
                  </div>
                </div>

                {/* Assigned Apps Badges */}
                <div className="flex flex-wrap items-center gap-1.5">
                  <span className="text-[11px] font-mono text-slate-400 mr-1">Managed Apps:</span>
                  {member.managed_app_names && member.managed_app_names.length > 0 ? (
                    member.managed_app_names.map((name, idx) => (
                      <span
                        key={idx}
                        className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-blue-500/10 text-blue-400 border border-blue-500/20"
                      >
                        <i className="fa-solid fa-cube text-[9px] mr-1"></i>
                        {name}
                      </span>
                    ))
                  ) : (
                    <span className="text-[10px] text-slate-500 font-mono italic">No apps assigned</span>
                  )}
                </div>

                {/* Permissions Badges */}
                <div className="flex flex-wrap items-center gap-1.5">
                  <span className="text-[11px] font-mono text-slate-400 mr-1">Permissions:</span>
                  {member.permissions?.can_create_keys && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                      Create Keys
                    </span>
                  )}
                  {member.permissions?.can_add_time && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-blue-500/10 text-blue-400 border border-blue-500/20">
                      Add Time
                    </span>
                  )}
                  {member.permissions?.can_reset_hwid && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
                      Reset HWID
                    </span>
                  )}
                  {member.permissions?.can_ban_users && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-rose-500/10 text-rose-400 border border-rose-500/20">
                      Ban
                    </span>
                  )}
                  {member.permissions?.can_freeze_users && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-amber-500/10 text-amber-400 border border-amber-500/20">
                      Freeze
                    </span>
                  )}
                  {member.permissions?.can_delete_users && (
                    <span className="text-[10px] font-mono px-2 py-0.5 rounded-none bg-[#080C14] text-slate-300 border border-[#1E2D4A]">
                      Delete
                    </span>
                  )}
                </div>
              </div>

              {/* Quota & Stats */}
              <div className="flex items-center justify-between sm:justify-start gap-4 border-t lg:border-t-0 lg:border-l border-[#1E2D4A] pt-3 lg:pt-0 lg:pl-6 shrink-0">
                <div className="text-left sm:text-center">
                  <div className="text-[10px] font-mono text-slate-400 uppercase">Created Keys</div>
                  <div className="text-base font-bold text-white font-brand">
                    {member.created_keys_count || 0}
                    <span className="text-xs text-slate-500 font-normal">
                      {member.max_keys_limit > 0 ? ` / ${member.max_keys_limit}` : ' (∞)'}
                    </span>
                  </div>
                </div>

                {/* Actions */}
                <div className="flex items-center gap-1.5 ml-2 sm:ml-4">
                  <button
                    onClick={() => openEditModal(member)}
                    className="p-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 hover:text-blue-400 transition"
                    title="Edit Permissions & Apps"
                  >
                    <i className="fa-solid fa-sliders text-xs"></i>
                  </button>
                  <button
                    onClick={() => { setSelectedMember(member); setResellerPass(''); setShowResetPassModal(true); }}
                    className="p-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 hover:text-amber-400 transition"
                    title="Reset Password"
                  >
                    <i className="fa-solid fa-key text-xs"></i>
                  </button>
                  <button
                    onClick={() => handleToggleStatus(member)}
                    className={`p-2 rounded-none border transition ${
                      member.status === 'active'
                        ? 'bg-[#080C14] border-[#1E2D4A] text-slate-300 hover:text-amber-400'
                        : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400'
                    }`}
                    title={member.status === 'active' ? 'Suspend Account' : 'Activate Account'}
                  >
                    <i className={`fa-solid ${member.status === 'active' ? 'fa-pause' : 'fa-play'} text-xs`}></i>
                  </button>
                  <button
                    onClick={() => handleDeleteMember(member)}
                    className="p-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 hover:text-rose-400 transition"
                    title="Delete Account"
                  >
                    <i className="fa-solid fa-trash text-xs"></i>
                  </button>
                </div>
              </div>
            </div>
          ))
        ) : (
          <div className="text-center py-12 text-slate-500 text-xs font-mono">
            ยังไม่มีทีมงานตัวแทนจำหน่าย
          </div>
        )}
      </div>

      {/* CREATE RESELLER MODAL */}
      <window.Modal
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        title="Create Reseller Account (สร้างยูสเซอร์ให้ทีมงาน)"
        icon="fa-user-plus"
        maxWidth="max-w-2xl"
      >
        <form onSubmit={handleCreateReseller} className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1 font-mono">RESELLER USERNAME *</label>
              <input
                type="text"
                required
                value={resellerUser}
                onChange={(e) => setResellerUser(e.target.value)}
                placeholder="reseller01"
                className="w-full px-3.5 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] text-sm text-white focus:border-[#1D63FF] outline-none font-mono"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-slate-300 mb-1 font-mono">PASSWORD *</label>
              <input
                type="password"
                required
                value={resellerPass}
                onChange={(e) => setResellerPass(e.target.value)}
                placeholder="••••••••"
                className="w-full px-3.5 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] text-sm text-white focus:border-[#1D63FF] outline-none font-mono"
              />
            </div>
          </div>

          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1 font-mono">
              MAX KEYS LIMIT (โควต้าจำนวนคีย์ที่สร้างได้, 0 = ไม่จำกัด)
            </label>
            <input
              type="number"
              min="0"
              value={resellerQuota}
              onChange={(e) => setResellerQuota(e.target.value)}
              className="w-full px-3.5 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] text-sm text-white focus:border-[#1D63FF] outline-none font-mono"
            />
          </div>

          {/* Managed Apps Selection */}
          <div className="space-y-2">
            <label className="block text-xs font-medium text-slate-300 font-mono">
              MANAGED APPLICATIONS (เลือกแอปที่อนุญาตให้จัดการ) *
            </label>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 p-3 rounded-none bg-[#080C14] border border-[#1E2D4A] max-h-40 overflow-y-auto custom-scroll">
              {apps && apps.map(app => (
                <label key={app.id} className="flex items-center gap-2 text-xs text-slate-200 cursor-pointer select-none">
                  <input
                    type="checkbox"
                    checked={selectedApps.includes(app.id)}
                    onChange={() => handleAppToggle(app.id)}
                    className="w-4 h-4 rounded-none text-blue-600 bg-slate-800 border-slate-700"
                  />
                  <span>{app.name}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Permissions Matrix */}
          <div className="space-y-2">
            <label className="block text-xs font-medium text-slate-300 font-mono">
              FUNCTION PERMISSIONS (สิทธิ์อนุญาตการใช้งานฟังก์ชัน)
            </label>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 p-3 rounded-none bg-[#080C14] border border-[#1E2D4A]">
              {[
                { key: 'can_create_keys', label: 'สร้างคีย์ / ยูสเซอร์ใหม่' },
                { key: 'can_add_time', label: 'เพิ่มเวลา / ต่ออายุคีย์' },
                { key: 'can_reset_hwid', label: 'รีเซ็ต HWID เครื่อง' },
                { key: 'can_ban_users', label: 'แบน / ปลดแบน ยูสเซอร์' },
                { key: 'can_freeze_users', label: 'แช่เวลา (Freeze) ยูสเซอร์' },
                { key: 'can_delete_users', label: 'ลบยูสเซอร์' },
                { key: 'can_export_keys', label: 'ส่งออกคีย์ (Export)' }
              ].map(item => (
                <label key={item.key} className="flex items-center gap-2 text-xs text-slate-200 cursor-pointer select-none">
                  <input
                    type="checkbox"
                    checked={permissions[item.key]}
                    onChange={() => handlePermToggle(item.key)}
                    className="w-4 h-4 rounded-none text-blue-600 bg-slate-800 border-slate-700"
                  />
                  <span>{item.label}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="flex justify-end gap-2.5 pt-3 border-t border-[#1E2D4A]">
            <button
              type="button"
              onClick={() => setShowCreateModal(false)}
              className="px-4 py-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 text-xs font-medium"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-5 py-2 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white text-xs font-semibold border border-[#1D63FF]"
            >
              Create Reseller
            </button>
          </div>
        </form>
      </window.Modal>

      {/* EDIT RESELLER MODAL */}
      <window.Modal
        isOpen={showEditModal}
        onClose={() => setShowEditModal(false)}
        title={`Edit Reseller: ${selectedMember?.username}`}
        icon="fa-sliders"
        maxWidth="max-w-2xl"
      >
        <form onSubmit={handleUpdateReseller} className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1 font-mono">
              MAX KEYS LIMIT (โควต้าจำนวนคีย์ที่สร้างได้, 0 = ไม่จำกัด)
            </label>
            <input
              type="number"
              min="0"
              value={resellerQuota}
              onChange={(e) => setResellerQuota(e.target.value)}
              className="w-full px-3.5 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] text-sm text-white focus:border-[#1D63FF] outline-none font-mono"
            />
          </div>

          {/* Managed Apps Selection */}
          <div className="space-y-2">
            <label className="block text-xs font-medium text-slate-300 font-mono">
              MANAGED APPLICATIONS (เลือกแอปที่อนุญาตให้จัดการ)
            </label>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 p-3 rounded-none bg-[#080C14] border border-[#1E2D4A] max-h-40 overflow-y-auto custom-scroll">
              {apps && apps.map(app => (
                <label key={app.id} className="flex items-center gap-2 text-xs text-slate-200 cursor-pointer select-none">
                  <input
                    type="checkbox"
                    checked={selectedApps.includes(app.id)}
                    onChange={() => handleAppToggle(app.id)}
                    className="w-4 h-4 rounded-none text-blue-600 bg-slate-800 border-slate-700"
                  />
                  <span>{app.name}</span>
                </label>
              ))}
            </div>
          </div>

          {/* Permissions Matrix */}
          <div className="space-y-2">
            <label className="block text-xs font-medium text-slate-300 font-mono">
              FUNCTION PERMISSIONS (สิทธิ์อนุญาตการใช้งานฟังก์ชัน)
            </label>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5 p-3 rounded-none bg-[#080C14] border border-[#1E2D4A]">
              {[
                { key: 'can_create_keys', label: 'สร้างคีย์ / ยูสเซอร์ใหม่' },
                { key: 'can_add_time', label: 'เพิ่มเวลา / ต่ออายุคีย์' },
                { key: 'can_reset_hwid', label: 'รีเซ็ต HWID เครื่อง' },
                { key: 'can_ban_users', label: 'แบน / ปลดแบน ยูสเซอร์' },
                { key: 'can_freeze_users', label: 'แช่เวลา (Freeze) ยูสเซอร์' },
                { key: 'can_delete_users', label: 'ลบยูสเซอร์' },
                { key: 'can_export_keys', label: 'ส่งออกคีย์ (Export)' }
              ].map(item => (
                <label key={item.key} className="flex items-center gap-2 text-xs text-slate-200 cursor-pointer select-none">
                  <input
                    type="checkbox"
                    checked={permissions[item.key]}
                    onChange={() => handlePermToggle(item.key)}
                    className="w-4 h-4 rounded-none text-blue-600 bg-slate-800 border-slate-700"
                  />
                  <span>{item.label}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="flex justify-end gap-2.5 pt-3 border-t border-[#1E2D4A]">
            <button
              type="button"
              onClick={() => setShowEditModal(false)}
              className="px-4 py-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 text-xs font-medium"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-5 py-2 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white text-xs font-semibold border border-[#1D63FF]"
            >
              Save Permissions
            </button>
          </div>
        </form>
      </window.Modal>

      {/* RESET PASSWORD MODAL */}
      <window.Modal
        isOpen={showResetPassModal}
        onClose={() => setShowResetPassModal(false)}
        title={`Reset Password for: ${selectedMember?.username}`}
        icon="fa-key"
      >
        <form onSubmit={handleResetPassword} className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-slate-300 mb-1 font-mono">NEW PASSWORD *</label>
            <input
              type="password"
              required
              value={resellerPass}
              onChange={(e) => setResellerPass(e.target.value)}
              placeholder="Minimum 4 characters"
              className="w-full px-3.5 py-2.5 rounded-none bg-[#080C14] border border-[#1E2D4A] text-sm text-white focus:border-[#1D63FF] outline-none font-mono"
            />
          </div>
          <div className="flex justify-end gap-2.5 pt-3 border-t border-[#1E2D4A]">
            <button
              type="button"
              onClick={() => setShowResetPassModal(false)}
              className="px-4 py-2 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 text-xs font-medium"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-5 py-2 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white text-xs font-semibold border border-[#1D63FF]"
            >
              Set New Password
            </button>
          </div>
        </form>
      </window.Modal>

      {/* CREATED CREDENTIALS RESULT MODAL */}
      <window.Modal
        isOpen={showResultModal}
        onClose={() => setShowResultModal(false)}
        title="สรุปข้อมูลบัญชีตัวแทนใหม่ (Credentials Ready)"
        icon="fa-circle-check"
      >
        {createdResult && (
          <div className="space-y-4">
            <div className="p-3.5 rounded-none bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs flex items-center gap-2">
              <i className="fa-solid fa-circle-check text-sm shrink-0"></i>
              <span>สร้างบัญชีตัวแทนจำหน่ายเรียบร้อยแล้ว! กรุณาคัดลอกข้อมูลไว้ส่งต่อ</span>
            </div>

            <div className="p-4 rounded-none bg-[#080C14] border border-[#1E2D4A] space-y-3 font-mono text-xs">
              <div className="flex items-center justify-between pb-2 border-b border-[#1E2D4A]">
                <span className="text-slate-400">USERNAME:</span>
                <div className="flex items-center gap-2">
                  <span className="font-bold text-white text-sm">{createdResult.username}</span>
                  <button
                    type="button"
                    onClick={() => {
                      navigator.clipboard.writeText(createdResult.username);
                      setCopiedKey('user');
                      setTimeout(() => setCopiedKey(''), 2000);
                      showToast('คัดลอก Username แล้ว', 'success');
                    }}
                    className="p-1 px-2 rounded-none bg-[#131D31] hover:bg-[#18243D] text-slate-300 hover:text-white border border-[#1E2D4A] text-[10px]"
                  >
                    {copiedKey === 'user' ? '✓ Copied' : 'Copy'}
                  </button>
                </div>
              </div>

              <div className="flex items-center justify-between pb-2 border-b border-[#1E2D4A]">
                <span className="text-slate-400">PASSWORD:</span>
                <div className="flex items-center gap-2">
                  <span className="font-bold text-cyan-400 text-sm tracking-wide">{createdResult.password}</span>
                  <button
                    type="button"
                    onClick={() => {
                      navigator.clipboard.writeText(createdResult.password);
                      setCopiedKey('pass');
                      setTimeout(() => setCopiedKey(''), 2000);
                      showToast('คัดลอก Password แล้ว', 'success');
                    }}
                    className="p-1 px-2 rounded-none bg-[#131D31] hover:bg-[#18243D] text-slate-300 hover:text-white border border-[#1E2D4A] text-[10px]"
                  >
                    {copiedKey === 'pass' ? '✓ Copied' : 'Copy'}
                  </button>
                </div>
              </div>

              <div className="flex items-center justify-between pb-2 border-b border-[#1E2D4A]">
                <span className="text-slate-400">ROLE:</span>
                <span className="text-purple-400 font-bold">{createdResult.role}</span>
              </div>

              <div className="flex items-center justify-between pb-2 border-b border-[#1E2D4A]">
                <span className="text-slate-400">KEY QUOTA:</span>
                <span className="text-amber-400 font-bold">{createdResult.quota}</span>
              </div>

              <div className="flex flex-col gap-1 pb-2 border-b border-[#1E2D4A]">
                <span className="text-slate-400">MANAGED APPS:</span>
                <div className="flex flex-wrap gap-1 mt-1">
                  {createdResult.apps.length > 0 ? (
                    createdResult.apps.map((app, idx) => (
                      <span key={idx} className="px-2 py-0.5 rounded-none bg-blue-500/10 text-blue-400 border border-blue-500/20 text-[10px]">
                        {app}
                      </span>
                    ))
                  ) : (
                    <span className="text-slate-500 italic text-[10px]">ไม่ได้ระบุแอป</span>
                  )}
                </div>
              </div>

              <div className="flex items-center justify-between text-[11px]">
                <span className="text-slate-400">PANEL LOGIN URL:</span>
                <span className="text-slate-300 truncate max-w-[200px]">{window.location.origin}</span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-2.5 pt-2">
              <button
                type="button"
                onClick={() => {
                  const summaryText = `==============================\nIceX Modz - Reseller Credentials\n==============================\nUsername: ${createdResult.username}\nPassword: ${createdResult.password}\nRole: ${createdResult.role}\nKey Quota: ${createdResult.quota}\nManaged Apps: ${createdResult.apps.join(', ') || 'None'}\nPanel URL: ${window.location.origin}\n==============================`;
                  navigator.clipboard.writeText(summaryText);
                  setCopiedKey('all');
                  setTimeout(() => setCopiedKey(''), 2500);
                  showToast('คัดลอกข้อมูลทั้งหมดสำเร็จ!', 'success');
                }}
                className="flex-1 py-2.5 px-4 rounded-none bg-[#1D63FF] hover:bg-[#3878FF] text-white font-semibold text-xs transition flex items-center justify-center gap-2 font-mono cyber-btn-interactive"
              >
                <i className={`fa-solid ${copiedKey === 'all' ? 'fa-check text-emerald-300' : 'fa-copy'} text-xs`}></i>
                <span>{copiedKey === 'all' ? 'คัดลอกทั้งหมดแล้ว!' : 'คัดลอกข้อมูลทั้งหมด (Copy All)'}</span>
              </button>
              <button
                type="button"
                onClick={() => setShowResultModal(false)}
                className="py-2.5 px-4 rounded-none bg-[#080C14] border border-[#1E2D4A] text-slate-300 hover:text-white text-xs font-mono"
              >
                เสร็จสิ้น / ปิดหน้าต่าง
              </button>
            </div>
          </div>
        )}
      </window.Modal>
    </div>
  );
};