import React, { useState } from 'react';
import { User, Role } from '../../types/accounting';
import { AVAILABLE_PERMISSIONS } from '../../data/initialData';
import { StorageService } from '../../services/storage';
import {
  Users,
  Shield,
  Key,
  Plus,
  Edit2,
  Trash2,
  CheckCircle2,
  X,
  UserCheck,
  Lock,
  Save,
  ShieldCheck,
  Check,
  Camera,
  Upload,
  Cloud,
  Sparkles,
} from 'lucide-react';
import { UserPhotoModal } from './UserPhotoModal';

interface UserManagementProps {
  users: User[];
  activeUser: User;
  onSaveUser: (user: User) => void;
  onDeleteUser: (id: string) => boolean;
  onSwitchUser: (user: User) => void;
}

export const UserManagementView: React.FC<UserManagementProps> = ({
  users,
  activeUser,
  onSaveUser,
  onDeleteUser,
  onSwitchUser,
}) => {
  const [activeTab, setActiveTab] = useState<'users' | 'roles'>('users');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [password, setPassword] = useState('admin123');
  const [roles, setRoles] = useState<Role[]>(() => StorageService.getRoles());
  const [saveSuccessMsg, setSaveSuccessMsg] = useState(false);

  const handleTogglePermission = (roleId: string, permissionId: string) => {
    setRoles((prev) =>
      prev.map((role) => {
        if (role.id !== roleId) return role;
        const exists = role.permissions.includes(permissionId);
        const newPerms = exists
          ? role.permissions.filter((p) => p !== permissionId)
          : [...role.permissions, permissionId];
        return { ...role, permissions: newPerms };
      })
    );
  };

  const handleSaveRolesMatrix = () => {
    StorageService.saveRoles(roles);
    setSaveSuccessMsg(true);
    setTimeout(() => setSaveSuccessMsg(false), 3000);
  };

  // Form State
  const [formData, setFormData] = useState<Omit<User, 'id' | 'createdAt'>>({
    username: '',
    name: '',
    email: '',
    role: 'akuntan',
    status: 'aktif',
    avatarUrl: '',
  });

  // State Photo Picker Modal (Lokal, Drive/Cloud, Kamera)
  const [photoModalState, setPhotoModalState] = useState<{
    isOpen: boolean;
    targetMode: 'form' | 'table';
    targetUser?: User | null;
    currentUrl: string;
    userName: string;
  }>({
    isOpen: false,
    targetMode: 'form',
    targetUser: null,
    currentUrl: '',
    userName: '',
  });

  const handleOpenPhotoModalForForm = () => {
    setPhotoModalState({
      isOpen: true,
      targetMode: 'form',
      targetUser: editingUser,
      currentUrl: formData.avatarUrl || '',
      userName: formData.name || 'Pengguna Baru',
    });
  };

  const handleOpenPhotoModalForTable = (user: User) => {
    setPhotoModalState({
      isOpen: true,
      targetMode: 'table',
      targetUser: user,
      currentUrl: user.avatarUrl || '',
      userName: user.name,
    });
  };

  const handlePhotoSaved = (photoUrl: string) => {
    if (photoModalState.targetMode === 'form') {
      setFormData((prev) => ({ ...prev, avatarUrl: photoUrl }));
    } else if (photoModalState.targetMode === 'table' && photoModalState.targetUser) {
      const updatedUser: User = {
        ...photoModalState.targetUser,
        avatarUrl: photoUrl,
      };
      onSaveUser(updatedUser);
    }
  };

  const handleOpenAdd = () => {
    setEditingUser(null);
    setFormData({
      username: '',
      name: '',
      email: '',
      role: 'akuntan',
      status: 'aktif',
      avatarUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&auto=format&fit=crop&q=80',
    });
    setPassword('admin123');
    setIsModalOpen(true);
  };

  const handleOpenEdit = (user: User) => {
    setEditingUser(user);
    setFormData({
      username: user.username,
      name: user.name,
      email: user.email,
      role: user.role,
      status: user.status,
      avatarUrl: user.avatarUrl,
    });
    setPassword('••••••••');
    setIsModalOpen(true);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const toSave: User = {
      id: editingUser ? editingUser.id : `usr-${Date.now()}`,
      createdAt: editingUser ? editingUser.createdAt : new Date().toISOString().substring(0, 10),
      ...formData,
    };
    onSaveUser(toSave);
    setIsModalOpen(false);
  };

  const getRoleBadge = (role: User['role']) => {
    switch (role) {
      case 'superadmin':
        return <span className="rounded bg-red-100 px-2 py-0.5 text-xs font-bold text-red-800">Super Administrator</span>;
      case 'akuntan':
        return <span className="rounded bg-blue-100 px-2 py-0.5 text-xs font-bold text-blue-800">Head Accountant</span>;
      case 'auditor':
        return <span className="rounded bg-purple-100 px-2 py-0.5 text-xs font-bold text-purple-800">Auditor</span>;
      case 'direktur':
        return <span className="rounded bg-amber-100 px-2 py-0.5 text-xs font-bold text-amber-800">Direktur / Direksi</span>;
    }
  };

  return (
    <div className="space-y-5">
      {/* Screen Card */}
      <div className="rounded-lg border border-slate-200 bg-white shadow-xs">
        {/* Header */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-3.5">
          <div className="flex items-center gap-2">
            <Users className="h-4 w-4 text-blue-600" />
            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Manajemen Pengguna & Hak Akses (User, Role & Permissions)
            </h2>
          </div>

          <div className="flex items-center gap-2">
            <div className="flex border border-slate-300 rounded bg-white p-0.5">
              <button
                onClick={() => setActiveTab('users')}
                className={`px-3 py-1 text-xs font-semibold rounded ${
                  activeTab === 'users' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                Daftar Pengguna ({users.length})
              </button>
              <button
                onClick={() => setActiveTab('roles')}
                className={`px-3 py-1 text-xs font-semibold rounded ${
                  activeTab === 'roles' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                Matriks Hak Akses (Roles)
              </button>
            </div>

            {activeTab === 'users' && (
              <button
                onClick={handleOpenAdd}
                className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white shadow-xs hover:bg-blue-700"
              >
                <Plus className="h-3.5 w-3.5" />
                Tambah Pengguna Baru
              </button>
            )}
          </div>
        </div>

        {/* Tab 1: Users List */}
        {activeTab === 'users' && (
          <div className="overflow-x-auto">
            <table className="w-full text-left text-xs border-collapse">
              <thead className="border-b border-slate-200 bg-slate-100 text-slate-700 uppercase font-semibold">
                <tr>
                  <th className="py-2.5 px-4">Nama & Username</th>
                  <th className="py-2.5 px-3">Role / Jabatan</th>
                  <th className="py-2.5 px-3">Email</th>
                  <th className="py-2.5 px-3 font-mono">Password Hash</th>
                  <th className="py-2.5 px-3 text-center">Status</th>
                  <th className="py-2.5 px-4 text-center">Simulasi Sesi</th>
                  <th className="py-2.5 px-4 text-center w-24">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {users.map((u) => {
                  const isCurrent = activeUser.id === u.id;
                  return (
                    <tr key={u.id} className={`hover:bg-blue-50/20 ${isCurrent ? 'bg-blue-50/40 font-medium' : ''}`}>
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-3">
                          <div
                            className="relative group cursor-pointer"
                            onClick={() => handleOpenPhotoModalForTable(u)}
                            title="Klik untuk mengubah foto (Lokal, Drive, atau Kamera)"
                          >
                            <img
                              src={u.avatarUrl || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100'}
                              alt={u.name}
                              className="h-9 w-9 rounded-full object-cover border-2 border-indigo-200 group-hover:border-indigo-600 shadow-2xs transition-all"
                            />
                            <div className="absolute inset-0 bg-slate-900/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                              <Camera className="h-3.5 w-3.5 text-white" />
                            </div>
                          </div>
                          <div>
                            <div className="font-semibold text-slate-900">{u.name}</div>
                            <div className="text-[11px] font-mono text-slate-500">@{u.username}</div>
                          </div>
                        </div>
                      </td>
                      <td className="py-3 px-3">{getRoleBadge(u.role)}</td>
                      <td className="py-3 px-3 text-slate-600 font-mono">{u.email}</td>
                      <td className="py-3 px-3 font-mono text-[10px] text-slate-400">
                        $2y$10$92IXUNpkjO0rOQ5...
                      </td>
                      <td className="py-3 px-3 text-center">
                        <span
                          className={`rounded px-2 py-0.5 text-[10px] font-bold uppercase ${
                            u.status === 'aktif' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-600'
                          }`}
                        >
                          {u.status}
                        </span>
                      </td>
                      <td className="py-3 px-4 text-center">
                        {isCurrent ? (
                          <span className="inline-flex items-center gap-1 rounded-full bg-emerald-600 px-2.5 py-0.5 text-[11px] font-semibold text-white">
                            <CheckCircle2 className="h-3 w-3" /> User Aktif
                          </span>
                        ) : (
                          <button
                            onClick={() => onSwitchUser(u)}
                            className="inline-flex items-center gap-1 rounded border border-slate-300 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-700 hover:bg-blue-50 hover:text-blue-700"
                          >
                            <UserCheck className="h-3 w-3" /> Masuk Sebagai
                          </button>
                        )}
                      </td>
                      <td className="py-3 px-4 text-center">
                        <div className="flex items-center justify-center gap-1.5">
                          <button
                            onClick={() => handleOpenEdit(u)}
                            title="Edit User"
                            className="rounded p-1 text-blue-600 hover:bg-blue-100"
                          >
                            <Edit2 className="h-3.5 w-3.5" />
                          </button>
                          {u.role !== 'superadmin' && (
                            <button
                              onClick={() => {
                                if (confirm(`Hapus pengguna ${u.name}?`)) {
                                  onDeleteUser(u.id);
                                }
                              }}
                              title="Hapus User"
                              className="rounded p-1 text-red-600 hover:bg-red-100"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Tab 2: Roles & Permissions Matrix */}
        {activeTab === 'roles' && (
          <div className="p-6 space-y-6">
            <div className="flex flex-wrap items-center justify-between gap-4 bg-slate-900 text-white p-4 rounded-xl shadow-xs">
              <div className="flex items-center gap-3">
                <div className="rounded-lg bg-blue-600 p-2 text-white">
                  <ShieldCheck className="h-5 w-5" />
                </div>
                <div>
                  <h3 className="text-sm font-bold">
                    Matriks Hak Akses Pengguna (Role-Based Access Control / RBAC)
                  </h3>
                  <p className="text-xs text-slate-300">
                    Atur izin hak akses untuk CRUD Virtual Ledger (VL), Jurnal Umum, Chart of Accounts, dan Penandatangan Dinamis.
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-2">
                {saveSuccessMsg && (
                  <span className="flex items-center gap-1.5 text-xs text-emerald-400 font-bold bg-emerald-950/80 border border-emerald-800 px-3 py-1.5 rounded-lg">
                    <Check className="h-3.5 w-3.5" />
                    Tersimpan di Sistem!
                  </span>
                )}
                <button
                  type="button"
                  onClick={handleSaveRolesMatrix}
                  className="flex items-center gap-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 px-4 py-2 text-xs font-bold text-white shadow-xs cursor-pointer"
                >
                  <Save className="h-3.5 w-3.5" />
                  <span>Simpan Perubahan Hak Akses</span>
                </button>
              </div>
            </div>

            {/* Matrix Table */}
            <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-xs">
              <table className="w-full text-left text-xs border-collapse">
                <thead className="bg-slate-50 text-slate-700 uppercase font-semibold border-b border-slate-200">
                  <tr>
                    <th className="py-3 px-4 w-2/5">Fitur &amp; Hak Akses (Permission)</th>
                    {roles.map((r) => (
                      <th key={r.id} className="py-3 px-3 text-center">
                        <div className="font-bold text-slate-900">{r.name}</div>
                        <span className="text-[10px] font-mono text-slate-500 lowercase font-normal">
                          role: {r.id}
                        </span>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {/* Grouped by Category */}
                  {(['Virtual Ledger & Vendor', 'Sistem & Konfigurasi', 'Jurnal & Transaksi', 'Master Akun', 'Laporan & Audit'] as const).map(
                    (cat) => {
                      const permsInCat = AVAILABLE_PERMISSIONS.filter((p) => p.category === cat);
                      if (permsInCat.length === 0) return null;
                      return (
                        <React.Fragment key={cat}>
                          <tr className="bg-slate-100/70">
                            <td
                              colSpan={roles.length + 1}
                              className="py-2 px-4 font-bold text-[11px] uppercase tracking-wider text-slate-800"
                            >
                              📁 {cat}
                            </td>
                          </tr>
                          {permsInCat.map((perm) => (
                            <tr key={perm.id} className="hover:bg-slate-50/70 transition-colors">
                              <td className="py-2.5 px-4">
                                <div className="font-semibold text-slate-900">{perm.name}</div>
                                <div className="text-[11px] text-slate-500">{perm.description}</div>
                                <code className="text-[10px] text-indigo-700 font-mono">key: {perm.id}</code>
                              </td>
                              {roles.map((r) => {
                                const isSuper = r.id === 'superadmin';
                                const isChecked = isSuper || r.permissions.includes(perm.id) || r.permissions.includes('all_access');
                                return (
                                  <td key={r.id} className="py-2.5 px-3 text-center">
                                    <label className="inline-flex items-center justify-center p-1.5 cursor-pointer">
                                      <input
                                        type="checkbox"
                                        disabled={isSuper}
                                        checked={isChecked}
                                        onChange={() => handleTogglePermission(r.id, perm.id)}
                                        className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 disabled:opacity-75 cursor-pointer"
                                      />
                                    </label>
                                  </td>
                                );
                              })}
                            </tr>
                          ))}
                        </React.Fragment>
                      );
                    }
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* Modal Add / Edit User */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-lg bg-white shadow-xl">
            <div className="flex items-center justify-between border-b border-slate-200 bg-slate-800 px-5 py-3.5 text-white rounded-t-lg">
              <h3 className="text-sm font-semibold">
                {editingUser ? 'Edit Data Pengguna' : 'Tambah Pengguna Baru'}
              </h3>
              <button onClick={() => setIsModalOpen(false)} className="text-slate-400 hover:text-white">
                <X className="h-4 w-4" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-5 space-y-3.5">
              {/* Foto Profil Pengguna (Lokal, Drive/Cloud, Kamera) */}
              <div className="rounded-xl border border-indigo-200 bg-linear-to-r from-indigo-50/80 to-blue-50/50 p-3.5 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div
                    className="relative group cursor-pointer"
                    onClick={handleOpenPhotoModalForForm}
                    title="Klik untuk ubah foto profil"
                  >
                    <img
                      src={formData.avatarUrl || 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200'}
                      alt="Avatar"
                      className="h-13 w-13 rounded-full object-cover border-2 border-indigo-500 shadow-sm"
                    />
                    <div className="absolute inset-0 bg-slate-900/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                      <Camera className="h-4 w-4 text-white" />
                    </div>
                  </div>
                  <div>
                    <span className="font-bold text-slate-800 text-xs block">Foto Profil Pengguna</span>
                    <span className="text-[10px] text-slate-500 block leading-tight">
                      Unggah Berkas Lokal, Google Drive, atau Kamera
                    </span>
                  </div>
                </div>

                <button
                  type="button"
                  onClick={handleOpenPhotoModalForForm}
                  className="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 text-xs font-semibold shadow-2xs transition-colors cursor-pointer"
                >
                  <Camera className="h-3.5 w-3.5" />
                  <span>Atur Foto</span>
                </button>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Username *</label>
                <input
                  type="text"
                  required
                  value={formData.username}
                  onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                  placeholder="contoh: akuntan_dian"
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Nama Lengkap & Gelar *</label>
                <input
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder="contoh: Dian Puspita, S.Ak."
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">Email Perusahaan *</label>
                <input
                  type="email"
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="nama@tiomandirijaya.co.id"
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-700">Role / Hak Akses *</label>
                  <select
                    value={formData.role}
                    onChange={(e) => setFormData({ ...formData, role: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-semibold focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="superadmin">Super Administrator</option>
                    <option value="akuntan">Head Accountant</option>
                    <option value="auditor">Auditor</option>
                    <option value="direktur">Direktur / Manajemen</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-semibold text-slate-700">Status Akun</label>
                  <select
                    value={formData.status}
                    onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
                    className="mt-1 w-full rounded border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    <option value="aktif">Aktif</option>
                    <option value="nonaktif">Non-aktif</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-700">
                  {editingUser ? 'Reset Kata Sandi / Password' : 'Kata Sandi Awal'}
                </label>
                <input
                  type="text"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="mt-1 w-full rounded border border-slate-300 px-3 py-1.5 text-xs font-mono focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="rounded bg-slate-200 px-4 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-300"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded bg-blue-600 px-5 py-2 text-xs font-semibold text-white shadow-xs hover:bg-blue-700"
                >
                  Simpan Pengguna
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Sub-Modal: Masukkan Foto Profil (Lokal, Drive/Cloud, Kamera) */}
      <UserPhotoModal
        isOpen={photoModalState.isOpen}
        onClose={() => setPhotoModalState((prev) => ({ ...prev, isOpen: false }))}
        currentPhotoUrl={photoModalState.currentUrl}
        userName={photoModalState.userName}
        onSavePhoto={handlePhotoSaved}
      />
    </div>
  );
};