"use client";
import useSWR from "swr";
import { useMemo, useState } from "react";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function AdminUsersPage() {
  const [q, setQ] = useState("");
  const [queryDraft, setQueryDraft] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const key = useMemo(() => (
    `/api/admin/users?q=${encodeURIComponent(q)}&page=${page}&pageSize=${pageSize}`
  ),[q, page, pageSize]);
  const { data, mutate } = useSWR<{ total: number; page: number; pageSize: number; users: any[] }>(key, fetcher);
  const users = data?.users ?? [];
  const total = data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(total / pageSize));
  const handleSearch = () => {
    const term = queryDraft.trim();
    if (!term) { setQ(""); setPage(1); return; }
    setQ(term);
    setPage(1);
  };
  return (
    <div>
      <h1>사용자 관리</h1>
      <div className="mb-3 rounded-xl border border-neutral-300 bg-white p-3 flex items-center gap-2">
        <input
          className="h-9 w-full max-w-[360px] px-3 rounded-md border border-neutral-300 bg-white text-sm"
          placeholder="검색 (닉네임/전화/이름)"
          value={queryDraft}
          onChange={(e) => setQueryDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
        />
        <button
          className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100 disabled:opacity-50"
          onClick={handleSearch}
          disabled={false}
        >
          검색
        </button>
        <span className="ml-auto text-xs text-neutral-600">총 {total.toLocaleString()}명</span>
      </div>

      <div className="rounded-xl border border-neutral-200 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-[#f6f4f4] border-b border-[#e6e6e6]">
            <tr>
              <th className="px-4 py-2 text-left text-[12px] text-[#8c8c8c]">닉네임</th>
              <th className="px-4 py-2 text-left text-[12px] text-[#8c8c8c]">이름</th>
              <th className="px-4 py-2 text-left text-[12px] text-[#8c8c8c]">전화</th>
              <th className="px-4 py-2 text-right text-[12px] text-[#8c8c8c]">포인트</th>
              <th className="px-4 py-2 text-center text-[12px] text-[#8c8c8c]">레벨</th>
              <th className="px-4 py-2 text-center text-[12px] text-[#8c8c8c]">등급</th>
              <th className="px-4 py-2 text-center text-[12px] text-[#8c8c8c]">상태</th>
              <th className="px-4 py-2 text-left text-[12px] text-[#8c8c8c]">권한</th>
              <th className="px-4 py-2 text-center text-[12px] text-[#8c8c8c]">작업</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#ececec] bg-white">
            {users.map((u) => (
              <Row key={u.userId} u={u} onChanged={mutate} />
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
        <button disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>이전</button>
        <span style={{ fontSize: 12 }}>페이지 {page} / {totalPages}</span>
        <button disabled={page >= totalPages} onClick={() => setPage((p) => Math.min(totalPages, p + 1))}>다음</button>
        <span style={{ marginLeft: 12, fontSize: 12 }}>페이지 크기</span>
        <select value={pageSize} onChange={(e) => { setPageSize(parseInt(e.target.value, 10)); setPage(1); }}>
          {[10, 20, 50, 100].map((s) => (<option key={s} value={s}>{s}</option>))}
        </select>
      </div>
    </div>
  );
}

function Row({ u, onChanged }: { u: any; onChanged: () => void }) {
  const [status, setStatus] = useState(u.status);
  const [roles, setRoles] = useState<string[]>(u.roles ?? []);
  async function save() {
    await fetch(`/api/admin/users/${u.userId}/status`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ status }) });
    await fetch(`/api/admin/users/${u.userId}/roles`, { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ roles }) });
    onChanged();
  }
  const allRoles = ["admin", "editor", "user"] as const;
  return (
    <tr className="hover:bg-neutral-50">
      <td className="px-4 py-2 text-left">{u.nickname}</td>
      <td className="px-4 py-2 text-left">{u.name}</td>
      <td className="px-4 py-2 text-left">{u.phone}</td>
      <td className="px-4 py-2 text-right tabular-nums">{(u.points ?? 0).toLocaleString()}</td>
      <td className="px-4 py-2 text-center">{u.level ?? 1}</td>
      <td className="px-4 py-2 text-center">{u.grade ?? 0}</td>
      <td className="px-4 py-2 text-center">
        <select className="h-8 px-2 border border-neutral-300 rounded-md bg-white text-sm" value={status} onChange={(e) => setStatus(e.target.value)}>
          <option value="active">활성</option>
          <option value="suspended">정지</option>
          <option value="withdrawn">탈퇴</option>
        </select>
      </td>
      <td className="px-4 py-2">
        {allRoles.map((r) => (
          <label key={r} className="mr-2">
            <input type="checkbox" checked={roles.includes(r)} onChange={(e) => setRoles((prev) => (e.target.checked ? Array.from(new Set([...prev, r])) : prev.filter((x) => x !== r)))} /> {r}
          </label>
        ))}
      </td>
      <td className="px-4 py-2 text-center">
        <button className="h-8 px-3 rounded-md bg-[#f94b37] text-white text-sm border border-[#d73b29] hover:opacity-95" onClick={save}>저장</button>
      </td>
    </tr>
  );
}


