"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import {
  Plus,
  Search,
  Upload,
  Download,
  FileSpreadsheet,
  UserCheck,
  UserX,
  Trash2,
  Lock,
  Mail,
  Phone,
  Filter,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Modal } from "@/components/ui/modal";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { ConfirmModal } from "@/components/common/ConfirmModal";
import { formatDateID } from "@/lib/utils";

interface UsersClientProps {
  initialUsers: any[];
  classes: any[];
}

export default function UsersClient({ initialUsers, classes }: UsersClientProps) {
  const router = useRouter();
  const [users, setUsers] = React.useState(initialUsers);
  const [roleTab, setRoleTab] = React.useState<"ALL" | "STUDENT" | "TEACHER" | "ADMIN">("ALL");
  const [search, setSearch] = React.useState("");

  // Create User Modal
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [role, setRole] = React.useState<"STUDENT" | "TEACHER" | "ADMIN">("STUDENT");
  const [fullName, setFullName] = React.useState("");
  const [username, setUsername] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("password123");
  const [nip, setNip] = React.useState("");
  const [nis, setNis] = React.useState("");
  const [nisn, setNisn] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [gender, setGender] = React.useState("MALE");
  const [classId, setClassId] = React.useState(classes[0]?.id || "");
  const [createLoading, setCreateLoading] = React.useState(false);
  const [createError, setCreateError] = React.useState("");

  // Import Modal
  const [importModalOpen, setImportModalOpen] = React.useState(false);
  const [importRole, setImportRole] = React.useState<"STUDENT" | "TEACHER">("STUDENT");
  const [importClassId, setImportClassId] = React.useState(classes[0]?.id || "");
  const [csvText, setCsvText] = React.useState("");
  const [importLoading, setImportLoading] = React.useState(false);
  const [importResult, setImportResult] = React.useState<{ importedCount: number; errors: string[] } | null>(null);

  // Delete / Toggle Status
  const [deleteTargetUser, setDeleteTargetUser] = React.useState<any | null>(null);
  const [deleteLoading, setDeleteLoading] = React.useState(false);

  const filteredUsers = users.filter((u) => {
    const matchRole = roleTab === "ALL" || u.role === roleTab;
    const nameStr = (
      u.teacher?.fullName ||
      u.student?.fullName ||
      u.username
    ).toLowerCase();
    const matchSearch =
      nameStr.includes(search.toLowerCase()) ||
      u.username.toLowerCase().includes(search.toLowerCase()) ||
      (u.student?.nis || "").includes(search) ||
      (u.teacher?.nip || "").includes(search);
    return matchRole && matchSearch;
  });

  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setCreateLoading(true);
    setCreateError("");

    try {
      const res = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          role,
          fullName,
          username,
          email,
          password,
          nip,
          nis,
          nisn,
          phone,
          gender,
          classId: role === "STUDENT" ? classId : undefined,
        }),
      });

      const data = await res.json();
      if (!res.ok || !data.success) {
        setCreateError(data.error || "Gagal membuat pengguna.");
        setCreateLoading(false);
        return;
      }

      setCreateModalOpen(false);
      window.location.reload();
    } catch (err) {
      setCreateError("Terjadi kesalahan jaringan.");
      setCreateLoading(false);
    }
  };

  const handleToggleActive = async (userId: string, currentActive: boolean) => {
    try {
      const res = await fetch(`/api/users/${userId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isActive: !currentActive }),
      });
      if (res.ok) {
        setUsers((prev) =>
          prev.map((u) => (u.id === userId ? { ...u, isActive: !currentActive } : u))
        );
      }
    } catch (err) {
      console.error(err);
    }
  };

  const handleDeleteUser = async () => {
    if (!deleteTargetUser) return;
    setDeleteLoading(true);
    try {
      const res = await fetch(`/api/users/${deleteTargetUser.id}`, {
        method: "DELETE",
      });
      if (res.ok) {
        setUsers((prev) => prev.filter((u) => u.id !== deleteTargetUser.id));
        setDeleteTargetUser(null);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setDeleteLoading(false);
    }
  };

  const handleProcessImport = async () => {
    if (!csvText.trim()) return;
    setImportLoading(true);
    setImportResult(null);

    // Simple CSV parser
    const lines = csvText.trim().split("\n");
    const items: any[] = [];

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();
      if (!line || line.startsWith("#")) continue;
      const parts = line.split(",").map((p) => p.trim());
      // format: NIS/NIP, Nama Lengkap, Gender(L/P), Email(opsional), Phone(opsional)
      if (parts.length >= 2) {
        items.push({
          username: parts[0],
          nis: parts[0],
          nip: parts[0],
          fullName: parts[1],
          gender: parts[2] || "L",
          email: parts[3] || null,
          phone: parts[4] || null,
          classId: importRole === "STUDENT" ? importClassId : undefined,
        });
      }
    }

    try {
      const res = await fetch("/api/users/import", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          role: importRole,
          items,
          classId: importClassId,
        }),
      });

      const data = await res.json();
      setImportLoading(false);
      if (res.ok && data.success) {
        setImportResult(data.data);
      } else {
        alert(data.error || "Gagal memproses impor.");
      }
    } catch (err) {
      setImportLoading(false);
      alert("Terjadi kesalahan sistem saat impor.");
    }
  };

  return (
    <div className="space-y-6">
      {/* Top Filter Bar & Actions */}
      <div className="flex flex-col md:flex-row items-center justify-between gap-4">
        {/* Role Tabs */}
        <div className="flex gap-1 bg-white p-1 rounded-xl border border-slate-200 text-xs font-semibold w-full md:w-auto">
          {[
            { key: "ALL", label: "Semua Pengguna" },
            { key: "STUDENT", label: "Siswa" },
            { key: "TEACHER", label: "Guru" },
            { key: "ADMIN", label: "Administrator" },
          ].map((tab) => (
            <button
              key={tab.key}
              onClick={() => setRoleTab(tab.key as any)}
              className={`px-3 py-1.5 rounded-lg transition-all ${
                roleTab === tab.key
                  ? "bg-blue-600 text-white shadow-sm"
                  : "text-slate-600 hover:bg-slate-100"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-2 w-full md:w-auto justify-end">
          <Button
            size="sm"
            variant="outline"
            onClick={() => setImportModalOpen(true)}
            className="text-xs"
          >
            <Upload className="mr-1.5 h-3.5 w-3.5" />
            Impor CSV/Excel
          </Button>

          <a
            href={`/api/users/export?role=${roleTab === "TEACHER" ? "TEACHER" : "STUDENT"}&format=csv`}
            download
          >
            <Button size="sm" variant="outline" className="text-xs">
              <Download className="mr-1.5 h-3.5 w-3.5" />
              Ekspor CSV
            </Button>
          </a>

          <Button
            size="sm"
            onClick={() => setCreateModalOpen(true)}
            className="text-xs font-bold"
          >
            <Plus className="mr-1.5 h-3.5 w-3.5" />
            Tambah Pengguna
          </Button>
        </div>
      </div>

      {/* Search Input */}
      <div className="relative max-w-sm">
        <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
        <input
          type="text"
          placeholder="Cari nama, NIS, NIP, atau username..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* Users Table */}
      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-xs text-left">
              <thead className="bg-slate-50 text-slate-600 font-bold border-b border-slate-200">
                <tr>
                  <th className="py-3 px-4">Pengguna & Identitas</th>
                  <th className="py-3 px-4">Peran (Role)</th>
                  <th className="py-3 px-4">Kelas / Jabatan</th>
                  <th className="py-3 px-4">Status Akun</th>
                  <th className="py-3 px-4">Terdaftar</th>
                  <th className="py-3 px-4 text-right">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredUsers.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="py-12 text-center text-slate-400">
                      Tidak ditemukan pengguna yang sesuai pencarian.
                    </td>
                  </tr>
                ) : (
                  filteredUsers.map((u) => {
                    const name =
                      u.teacher?.fullName || u.student?.fullName || u.username;
                    const identifier =
                      u.student?.nis || u.teacher?.nip || u.username;
                    const roleBadge =
                      u.role === "ADMIN"
                        ? "danger"
                        : u.role === "TEACHER"
                        ? "primary"
                        : "secondary";

                    const className =
                      u.student?.classMembers?.[0]?.class?.name ||
                      (u.teacher?.homeroomClasses?.length
                        ? `Wali Kelas ${u.teacher.homeroomClasses[0].name}`
                        : "-");

                    return (
                      <tr key={u.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4">
                          <div className="flex items-center gap-2.5">
                            <div className="h-8 w-8 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center font-bold text-slate-600 text-xs shrink-0">
                              {name.substring(0, 2).toUpperCase()}
                            </div>
                            <div>
                              <p className="font-bold text-slate-800">{name}</p>
                              <p className="text-[11px] text-slate-400 font-mono">
                                ID: {identifier} • @{u.username}
                              </p>
                            </div>
                          </div>
                        </td>

                        <td className="py-3 px-4">
                          <Badge variant={roleBadge as any}>{u.role}</Badge>
                        </td>

                        <td className="py-3 px-4 font-semibold text-slate-700">
                          {className}
                        </td>

                        <td className="py-3 px-4">
                          <span
                            className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-semibold ${
                              u.isActive
                                ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
                                : "bg-slate-100 text-slate-500 border border-slate-200"
                            }`}
                          >
                            <span
                              className={`h-1.5 w-1.5 rounded-full ${
                                u.isActive ? "bg-emerald-500" : "bg-slate-400"
                              }`}
                            />
                            {u.isActive ? "Aktif" : "Nonaktif"}
                          </span>
                        </td>

                        <td className="py-3 px-4 text-slate-400 font-mono">
                          {formatDateID(u.createdAt)}
                        </td>

                        <td className="py-3 px-4 text-right">
                          <div className="flex items-center justify-end gap-1.5">
                            <button
                              type="button"
                              onClick={() => handleToggleActive(u.id, u.isActive)}
                              className="p-1.5 rounded-lg border border-slate-200 text-slate-500 hover:bg-slate-100 hover:text-slate-800 transition-colors"
                              title={u.isActive ? "Nonaktifkan Akun" : "Aktifkan Akun"}
                            >
                              {u.isActive ? (
                                <UserCheck className="h-3.5 w-3.5 text-emerald-600" />
                              ) : (
                                <UserX className="h-3.5 w-3.5 text-slate-400" />
                              )}
                            </button>

                            {u.role !== "ADMIN" && (
                              <button
                                type="button"
                                onClick={() => setDeleteTargetUser(u)}
                                className="p-1.5 rounded-lg border border-slate-200 text-rose-500 hover:bg-rose-50 transition-colors"
                                title="Hapus Akun"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      {/* Modal Tambah Pengguna */}
      <Modal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
        title="Tambah Pengguna Baru"
        description="Masukkan identitas lengkap akun pengguna."
        maxWidth="lg"
      >
        <form onSubmit={handleCreateUser} className="space-y-4">
          {createError && (
            <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs">
              {createError}
            </div>
          )}

          <Select
            label="Peran Akun"
            value={role}
            onChange={(e) => setRole(e.target.value as any)}
          >
            <option value="STUDENT">Siswa (Peserta Didik)</option>
            <option value="TEACHER">Guru (Tenaga Pendidik)</option>
            <option value="ADMIN">Administrator Sistem</option>
          </Select>

          <Input
            label="Nama Lengkap"
            placeholder="Contoh: Muhammad Ilham, S.Pd. atau Rahmat Hidayat"
            value={fullName}
            onChange={(e) => setFullName(e.target.value)}
            required
          />

          <div className="grid grid-cols-2 gap-3">
            <Input
              label="Username Akun"
              placeholder="Contoh: siswa31 / guru.biologi"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
            <Input
              label="Kata Sandi Default"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>

          {role === "STUDENT" && (
            <div className="space-y-3 pt-2 border-t border-slate-100">
              <div className="grid grid-cols-2 gap-3">
                <Input
                  label="NIS (Nomor Induk Siswa)"
                  placeholder="Contoh: 26031"
                  value={nis}
                  onChange={(e) => setNis(e.target.value)}
                  required
                />
                <Input
                  label="NISN (Opsional)"
                  placeholder="Contoh: 0071234567"
                  value={nisn}
                  onChange={(e) => setNisn(e.target.value)}
                />
              </div>

              <Select
                label="Penempatan Rombel Kelas"
                value={classId}
                onChange={(e) => setClassId(e.target.value)}
              >
                {classes.map((c) => (
                  <option key={c.id} value={c.id}>
                    Kelas {c.name} (Tingkat {c.gradeLevel})
                  </option>
                ))}
              </Select>
            </div>
          )}

          {role === "TEACHER" && (
            <div className="pt-2 border-t border-slate-100">
              <Input
                label="NIP (Nomor Induk Pegawai)"
                placeholder="Contoh: 198005122005011002"
                value={nip}
                onChange={(e) => setNip(e.target.value)}
              />
            </div>
          )}

          <div className="grid grid-cols-2 gap-3">
            <Input
              label="Email (Opsional)"
              type="email"
              placeholder="user@sman3oku.sch.id"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Input
              label="Nomor Telepon / WhatsApp"
              placeholder="0812XXXXXXXX"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>

          <div className="flex justify-end gap-2.5 pt-4 border-t border-slate-100">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setCreateModalOpen(false)}
            >
              Batal
            </Button>
            <Button type="submit" size="sm" isLoading={createLoading}>
              Simpan Pengguna
            </Button>
          </div>
        </form>
      </Modal>

      {/* Modal Impor CSV */}
      <Modal
        isOpen={importModalOpen}
        onClose={() => {
          setImportModalOpen(false);
          setImportResult(null);
        }}
        title="Impor Massal Pengguna via Format CSV / Excel"
        description="Salin dan tempel data teks CSV ke formulir di bawah ini."
        maxWidth="xl"
      >
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <Select
              label="Peran yang Diimpor"
              value={importRole}
              onChange={(e) => setImportRole(e.target.value as any)}
            >
              <option value="STUDENT">Siswa (Peserta Didik)</option>
              <option value="TEACHER">Guru (Tenaga Pendidik)</option>
            </Select>

            {importRole === "STUDENT" && (
              <Select
                label="Target Rombel Kelas"
                value={importClassId}
                onChange={(e) => setImportClassId(e.target.value)}
              >
                {classes.map((c) => (
                  <option key={c.id} value={c.id}>
                    Kelas {c.name}
                  </option>
                ))}
              </Select>
            )}
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Data Baris CSV (Format: NIS/NIP, Nama Lengkap, Gender L/P, Email, Phone)
            </label>
            <textarea
              rows={6}
              value={csvText}
              onChange={(e) => setCsvText(e.target.value)}
              placeholder={`26031, Rian Pratama, L, rian@siswa.sman3oku.sch.id, 08123456789\n26032, Salsabila Putri, P, salsa@siswa.sman3oku.sch.id, 08123456780`}
              className="w-full font-mono text-xs p-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <p className="text-[11px] text-slate-400 mt-1">
              * Password akun otomatis disetel ke default: <strong>password123</strong>
            </p>
          </div>

          {importResult && (
            <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 text-xs space-y-2">
              <p className="font-bold text-emerald-700">
                ✓ Berhasil mengimpor {importResult.importedCount} data pengguna!
              </p>
              {importResult.errors.length > 0 && (
                <div className="text-rose-600 space-y-1">
                  <p className="font-bold">Baris yang bermasalah/dilewati:</p>
                  <ul className="list-disc pl-4 space-y-0.5">
                    {importResult.errors.map((err, i) => (
                      <li key={i}>{err}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          )}

          <div className="flex justify-end gap-2.5 pt-4 border-t border-slate-100">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => {
                setImportModalOpen(false);
                window.location.reload();
              }}
            >
              Tutup
            </Button>
            <Button
              type="button"
              size="sm"
              onClick={handleProcessImport}
              isLoading={importLoading}
            >
              Proses Impor Data
            </Button>
          </div>
        </div>
      </Modal>

      {/* Delete User Confirmation Modal */}
      {deleteTargetUser && (
        <ConfirmModal
          isOpen={!!deleteTargetUser}
          onClose={() => setDeleteTargetUser(null)}
          onConfirm={handleDeleteUser}
          title="Konfirmasi Hapus Pengguna"
          message={`Apakah Anda yakin ingin menonaktifkan dan menghapus pengguna "${
            deleteTargetUser.teacher?.fullName ||
            deleteTargetUser.student?.fullName ||
            deleteTargetUser.username
          }"?`}
          confirmLabel="Hapus Pengguna"
          isDestructive
          isLoading={deleteLoading}
        />
      )}
    </div>
  );
}