import Link from "next/link";
import { notFound } from "next/navigation";
import {
  alertUser,
  disconnectUser,
  giveCurrency,
  setMotto,
  setRank,
} from "@/actions/admin-users";
import { InfoItem, StatusCard } from "@/components/admin/dashboard";
import { User } from "lucide-react";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminUserDetail({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const userId = Number(id);
  const user = await prisma.user
    .findUnique({
      where: { id: userId },
      select: { id: true, username: true, motto: true, rank: true, credits: true, look: true, online: true },
    })
    .catch(() => null);
  if (!user) notFound();

  const isOnline = user.online === "1";

  return (
    <main>
      <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
        <Link href="/admin/users">← Users</Link>
      </p>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <User size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{user.username}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{user.motto ? user.motto : "No motto set."}</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label="User ID" value={user.id} icon="🆔" />
        <StatusCard label="Rank" value={user.rank} icon="🎖️" />
        <StatusCard label="Credits" value={user.credits} icon="💰" />
        <StatusCard
          label="Status"
          value={isOnline ? "Online" : "Offline"}
          state={isOnline ? "ok" : "neutral"}
          icon={isOnline ? "🟢" : "⚪"}
        />
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">Overview</h2>
        <div className="grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-2.5">
          <InfoItem label="Username" value={user.username} />
          <InfoItem
            label="Status"
            value={
              <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${isOnline ? "bg-green-600/20 text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}>
                {isOnline ? "online" : "offline"}
              </span>
            }
          />
          <InfoItem label="Rank" value={user.rank} />
          <InfoItem label="Credits" value={user.credits} />
          <InfoItem label="Look" value={<code>{user.look || "—"}</code>} />
        </div>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">Actions</h2>
        <div className="grid cols-2">
          <form action={giveCurrency} className="admin-card">
            <input type="hidden" name="userId" value={user.id} />
            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Give currency</h3>
            <select name="type">
              <option value="credits">Credits</option>
              <option value="duckets">Duckets</option>
              <option value="diamonds">Diamonds</option>
              <option value="points">Points</option>
            </select>{" "}
            <input name="amount" type="number" min={1} placeholder="Amount" />{" "}
            <button type="submit" className="btn btn-primary">
              Give
            </button>
          </form>

          <form action={setMotto} className="admin-card">
            <input type="hidden" name="userId" value={user.id} />
            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Set motto</h3>
            <input name="motto" defaultValue={user.motto} maxLength={127} />{" "}
            <button type="submit" className="btn btn-primary">
              Save
            </button>
          </form>

          <form action={setRank} className="admin-card">
            <input type="hidden" name="userId" value={user.id} />
            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Set rank</h3>
            <input name="rank" type="number" min={1} defaultValue={user.rank} />{" "}
            <button type="submit" className="btn btn-primary">
              Set
            </button>
          </form>

          <form action={alertUser} className="admin-card">
            <input type="hidden" name="userId" value={user.id} />
            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Alert</h3>
            <input name="message" placeholder="Message" />{" "}
            <button type="submit" className="btn btn-primary">
              Send
            </button>
          </form>

          <form action={disconnectUser} className="admin-card">
            <input type="hidden" name="userId" value={user.id} />
            <input type="hidden" name="username" value={user.username} />
            <h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Disconnect</h3>
            <button type="submit" className="btn btn-danger">
              Disconnect from hotel
            </button>
          </form>
        </div>
      </section>
    </main>
  );
}