"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { getDemoStore } from "@/lib/mockData";

interface AdminUser {
  id: string;
  name: string;
  email: string;
  role: "USER" | "ADMIN";
  createdAt: string;
  taskCount: number;
  active: boolean;
}

const INITIAL_ADMIN_USERS: AdminUser[] = [
  {
    id: "user-1",
    name: "Admin Master",
    email: "admin@checkflow.local",
    role: "ADMIN",
    createdAt: "2026-08-01T09:00:00Z",
    taskCount: 42,
    active: true,
  },
  {
    id: "user-2",
    name: "Demo Explorer",
    email: "demo@checkflow.local",
    role: "USER",
    createdAt: "2026-08-15T14:20:00Z",
    taskCount: 18,
    active: true,
  },
  {
    id: "user-3",
    name: "Family Member 1",
    email: "sarah@home.lan",
    role: "USER",
    createdAt: "2026-08-18T11:00:00Z",
    taskCount: 7,
    active: true,
  },
];

export default function AdminPage() {
  const router = useRouter();
  const { data: session, status } = useSession();

  const [users, setUsers] = useState<AdminUser[]>(INITIAL_ADMIN_USERS);
  const [search, setSearch] = useState("");
  const [totalTasks] = useState(() => {
    if (typeof window !== "undefined") {
      const store = getDemoStore();
      return store.tasks ? store.tasks.length : 67;
    }
    return 67;
  });
  const [totalLists] = useState(() => {
    if (typeof window !== "undefined") {
      const store = getDemoStore();
      return store.lists ? store.lists.length : 9;
    }
    return 9;
  });

  // 어드민 권한 판별
  const userRole = session?.user?.role;
  const userEmail = session?.user?.email;
  const isAdmin = userRole === "ADMIN" || userEmail?.endsWith("@checkflow.local") || userEmail?.startsWith("admin@");

  // 인증 게이트: 비로그인 시 /login으로 리디렉션
  useEffect(() => {
    if (status === "unauthenticated") {
      router.replace("/login?callbackUrl=/admin");
    }
  }, [status, router]);

  // 로딩 중 스피너
  if (status === "loading" || status === "unauthenticated") {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ fontSize: 32, marginBottom: 12 }}>🔒</div>
          <p style={{ color: "var(--text-secondary)" }}>Checking administrator credentials...</p>
        </div>
      </div>
    );
  }

  // 비인가 사용자(일반 유저) 차단 화면
  if (!isAdmin) {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-primary)", color: "var(--text-primary)", padding: 24 }}>
        <div style={{ maxWidth: 440, width: "100%", background: "var(--bg-secondary)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: 32, textAlign: "center" }}>
          <div style={{ fontSize: 44, marginBottom: 16 }}>🛡️</div>
          <h2 style={{ fontSize: 20, fontWeight: 700, margin: "0 0 8px" }}>Access Restricted</h2>
          <p style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.6, margin: "0 0 24px" }}>
            This console requires <strong>ADMIN</strong> privileges. Your account (<code>{session?.user?.email}</code>) does not have authorization to view multi-user system telemetry.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
            <Link href="/demo" className="btn btn-ghost">
              Open Demo
            </Link>
            <Link href="/" className="btn btn-primary">
              Return to Tasks
            </Link>
          </div>
        </div>
      </div>
    );
  }

  const toggleRole = (id: string) => {
    setUsers((prev) =>
      prev.map((u) => (u.id === id ? { ...u, role: u.role === "ADMIN" ? "USER" : "ADMIN" } : u))
    );
  };

  const toggleStatus = (id: string) => {
    setUsers((prev) =>
      prev.map((u) => (u.id === id ? { ...u, active: !u.active } : u))
    );
  };

  const deleteUser = (id: string) => {
    if (confirm("Are you sure you want to delete this user and all their tasks?")) {
      setUsers((prev) => prev.filter((u) => u.id !== id));
    }
  };

  const filteredUsers = users.filter(
    (u) =>
      u.name.toLowerCase().includes(search.toLowerCase()) ||
      u.email.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-primary)", color: "var(--text-primary)", padding: "24px 32px" }}>
      {/* Top Navbar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--border)", paddingBottom: 16, marginBottom: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div className="sidebar-logo">👑</div>
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, letterSpacing: -0.5 }}>
              CheckFlow Admin Console
            </h1>
            <p style={{ fontSize: 12, color: "var(--text-tertiary)", margin: 0 }}>
              Multi-user platform & self-hosted instance management
            </p>
          </div>
        </div>

        <div style={{ display: "flex", gap: 8 }}>
          <Link href="/demo" className="btn btn-ghost btn-sm">
            ← Back to App (Demo)
          </Link>
          <Link href="/" className="btn btn-primary btn-sm">
            🚀 Open Main Dashboard
          </Link>
        </div>
      </div>

      {/* Stats Cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginBottom: 28 }}>
        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Users</div>
          <div style={{ fontSize: 28, fontWeight: 800, color: "var(--accent)", marginTop: 4 }}>{users.length}</div>
          <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● 100% active instances</div>
        </div>

        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Projects / Lists</div>
          <div style={{ fontSize: 28, fontWeight: 800, color: "#10B981", marginTop: 4 }}>{totalLists}</div>
          <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Across all users</div>
        </div>

        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>Total Tasks & Notes</div>
          <div style={{ fontSize: 28, fontWeight: 800, color: "#8B5CF6", marginTop: 4 }}>{totalTasks}</div>
          <div style={{ fontSize: 11, color: "var(--text-tertiary)", marginTop: 2 }}>Recursive subtasks included</div>
        </div>

        <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", padding: "16px 20px", borderRadius: "var(--radius-md)" }}>
          <div style={{ fontSize: 12, color: "var(--text-tertiary)", fontWeight: 600, textTransform: "uppercase" }}>CalDAV / DAVx⁵ Status</div>
          <div style={{ fontSize: 28, fontWeight: 800, color: "#F59E0B", marginTop: 4 }}>Active</div>
          <div style={{ fontSize: 11, color: "var(--success)", marginTop: 2 }}>● Basic Auth Bypass Verified</div>
        </div>
      </div>

      {/* User Management Section */}
      <div style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16, flexWrap: "wrap", gap: 12 }}>
          <h2 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>Registered Users & Privacy Isolation</h2>
          <input
            className="form-input"
            placeholder="Search users by name or email..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ maxWidth: 300 }}
          />
        </div>

        {/* Users Table */}
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left", fontSize: 13 }}>
            <thead>
              <tr style={{ borderBottom: "1px solid var(--border)", color: "var(--text-tertiary)" }}>
                <th style={{ padding: "10px 12px" }}>User</th>
                <th style={{ padding: "10px 12px" }}>Role</th>
                <th style={{ padding: "10px 12px" }}>Joined Date</th>
                <th style={{ padding: "10px 12px" }}>Tasks</th>
                <th style={{ padding: "10px 12px" }}>Status</th>
                <th style={{ padding: "10px 12px", textAlign: "right" }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredUsers.map((u) => (
                <tr key={u.id} style={{ borderBottom: "1px solid var(--border)" }}>
                  <td style={{ padding: "12px" }}>
                    <div style={{ fontWeight: 600 }}>{u.name}</div>
                    <div style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{u.email}</div>
                  </td>
                  <td style={{ padding: "12px" }}>
                    <span
                      style={{
                        padding: "3px 8px",
                        borderRadius: "var(--radius-sm)",
                        fontSize: 11,
                        fontWeight: 700,
                        background: u.role === "ADMIN" ? "rgba(75, 123, 245, 0.15)" : "var(--bg-primary)",
                        color: u.role === "ADMIN" ? "var(--accent)" : "var(--text-secondary)",
                        border: "1px solid var(--border)",
                      }}
                    >
                      {u.role}
                    </span>
                  </td>
                  <td style={{ padding: "12px", color: "var(--text-secondary)" }}>
                    {new Date(u.createdAt).toLocaleDateString()}
                  </td>
                  <td style={{ padding: "12px", color: "var(--text-secondary)" }}>
                    {u.taskCount} tasks
                  </td>
                  <td style={{ padding: "12px" }}>
                    <span style={{ color: u.active ? "var(--success)" : "var(--danger)", fontWeight: 600, fontSize: 12 }}>
                      {u.active ? "● Active" : "○ Inactive"}
                    </span>
                  </td>
                  <td style={{ padding: "12px", textAlign: "right" }}>
                    <div style={{ display: "inline-flex", gap: 6 }}>
                      <button
                        type="button"
                        className="btn btn-ghost btn-sm"
                        onClick={() => toggleRole(u.id)}
                        title="Change role"
                        style={{ fontSize: 11, padding: "3px 8px" }}
                      >
                        {u.role === "ADMIN" ? "Demote" : "Promote Admin"}
                      </button>
                      <button
                        type="button"
                        className="btn btn-ghost btn-sm"
                        onClick={() => toggleStatus(u.id)}
                        title="Toggle active status"
                        style={{ fontSize: 11, padding: "3px 8px" }}
                      >
                        {u.active ? "Deactivate" : "Activate"}
                      </button>
                      <button
                        type="button"
                        className="btn btn-ghost btn-sm"
                        onClick={() => deleteUser(u.id)}
                        title="Delete user"
                        style={{ fontSize: 11, padding: "3px 8px", color: "var(--danger)" }}
                      >
                        Delete
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}