"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { db } from "@/lib/firebase/clientApp";
import {
  addDoc,
  collection,
  onSnapshot,
  orderBy,
  query,
  serverTimestamp,
} from "firebase/firestore";

type UserDoc = {
  displayName: string;
  isArtist: boolean;
  createdAt?: unknown;
  id?: string;
};

export default function Home() {
  const [displayName, setDisplayName] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [users, setUsers] = useState<UserDoc[]>([]);

  const usersCollectionRef = useMemo(() => collection(db, "user"), []);

  useEffect(() => {
    const q = query(usersCollectionRef, orderBy("displayName"));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const docs: UserDoc[] = snapshot.docs.map((d) => ({
        id: d.id,
        ...(d.data() as Omit<UserDoc, "id">),
      }));
      setUsers(docs);
    });
    return () => unsubscribe();
  }, [usersCollectionRef]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const name = displayName.trim();
    if (!name) {
      setError("Display name is required.");
      return;
    }
    try {
      setIsSubmitting(true);
      await addDoc(usersCollectionRef, {
        displayName: name,
        isArtist: true,
        createdAt: serverTimestamp(),
      });
      setDisplayName("");
    } catch (err) {
      setError("Failed to create user. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <div className="flex items-start justify-center bg-zinc-50 font-sans dark:bg-black">
      <main className="flex w-full max-w-3xl flex-col gap-10 py-16 px-6 sm:px-8">
        <section className="rounded-xl border border-black/10 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-black">
          <h1 className="mb-4 text-2xl font-semibold text-black dark:text-zinc-50">Create User</h1>
          <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:flex-row sm:items-end">
            <div className="flex-1">
              <label htmlFor="displayName" className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300">
                Display Name
              </label>
              <input
                id="displayName"
                name="displayName"
                type="text"
                value={displayName}
                onChange={(e) => setDisplayName(e.target.value)}
                placeholder="Enter a display name"
                className="w-full rounded-md border border-black/10 bg-white px-3 py-2 text-black outline-none ring-0 focus:border-black/20 dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100"
              />
            </div>
            <button
              type="submit"
              disabled={isSubmitting}
              className="h-[42px] rounded-md bg-black px-4 text-white transition-opacity disabled:opacity-50 dark:bg-white dark:text-black"
            >
              {isSubmitting ? "Creating..." : "Create"}
            </button>
          </form>
          {error && <p className="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>}
        </section>

        <section className="rounded-xl border border-black/10 bg-white p-6 shadow-sm dark:border-white/10 dark:bg-black">
          <h2 className="mb-4 text-xl font-semibold text-black dark:text-zinc-50">Users</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full table-auto border-collapse">
              <thead>
                <tr className="text-left text-sm text-zinc-600 dark:text-zinc-300">
                  <th className="border-b border-black/10 px-3 py-2 font-medium dark:border-white/10">Display Name</th>
                  <th className="border-b border-black/10 px-3 py-2 font-medium dark:border-white/10">Is Artist</th>
                </tr>
              </thead>
              <tbody>
                {users.map((u) => (
                  <tr key={u.id} className="text-sm text-zinc-800 dark:text-zinc-200">
                    <td className="border-b border-black/5 px-3 py-2 dark:border-white/5">
                      <Link href={`/user/${u.id}`} className="text-blue-600 hover:underline dark:text-blue-400">
                        {u.displayName}
                      </Link>
                    </td>
                    <td className="border-b border-black/5 px-3 py-2 dark:border-white/5">{String(u.isArtist)}</td>
                  </tr>
                ))}
                {users.length === 0 && (
                  <tr>
                    <td colSpan={2} className="px-3 py-4 text-center text-sm text-zinc-500 dark:text-zinc-400">
                      No users yet.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </section>
      </main>
    </div>
  );
}