"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";

type User = {
  id: number;
  name: string;
  username: string;
};

type FaqItem = {
  id: number;
  category_id: number;
  category_name?: string;
  question: string;
  answer: string;
  video_link?: string | null;
  created_by?: string | null;
  views: number;
  likes: number;
  dislikes: number;
  is_active: number;
  created_at: string;
};

type CategoryOption = {
  id: number;
  name: string;
};

const AUTH_STORAGE_KEY = "faq-auth";

export default function AuthDashboard() {
  const router = useRouter();
  const [user, setUser] = useState<User | null>(null);
  const [faqs, setFaqs] = useState<FaqItem[]>([]);
  const [categories, setCategories] = useState<CategoryOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState({ username: "", password: "" });
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activeFilter, setActiveFilter] = useState("all");

  useEffect(() => {
    try {
      const saved = window.localStorage.getItem(AUTH_STORAGE_KEY);
      if (saved) {
        const parsed = JSON.parse(saved) as User;
        setUser(parsed);
        void fetchFaqs();
        void loadCategories();
      } else {
        setLoading(false);
      }
    } catch {
      setLoading(false);
    }
  }, []);

  async function loadCategories() {
    try {
      const response = await fetch("/api/faq-categories");
      const data = await response.json();
      if (data.success) {
        setCategories(data.categories || []);
      }
    } catch {
      setCategories([]);
    }
  }

  async function fetchFaqs() {
    try {
      const response = await fetch("/api/faqs");
      const data = await response.json();
      if (data.success) {
        setFaqs(data.faqs || []);
      }
    } catch {
      setFaqs([]);
    } finally {
      setLoading(false);
    }
  }

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsSubmitting(true);
    setMessage("");

    try {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });

      const data = await response.json();
      if (!response.ok || !data.success) {
        setMessage(data.message || "Login gagal.");
        setIsSubmitting(false);
        return;
      }

      window.localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(data.user));
      setUser(data.user);
      setMessage(data.message || "Login berhasil.");
      await fetchFaqs();
      router.refresh();
    } catch {
      setMessage("Terjadi kesalahan saat menghubungi server.");
    } finally {
      setIsSubmitting(false);
    }
  }

  function handleLogout() {
    window.localStorage.removeItem(AUTH_STORAGE_KEY);
    setUser(null);
    setFaqs([]);
    setMessage("");
    setForm({ username: "", password: "" });
  }

  async function handleDeleteFaq(id: number) {
    const confirmed = window.confirm("Apakah Anda yakin ingin menghapus FAQ ini?");
    if (!confirmed) {
      return;
    }

    try {
      const response = await fetch(`/api/faqs/${id}`, {
        method: "DELETE",
      });
      const data = await response.json();

      if (!response.ok || !data.success) {
        setMessage(data.message || "Gagal menghapus FAQ.");
        return;
      }

      setMessage(data.message || "FAQ berhasil dihapus.");
      await fetchFaqs();
    } catch {
      setMessage("Terjadi kesalahan saat menghapus FAQ.");
    }
  }

  async function handleDeleteCategory(id: number, name: string) {
    try {
      const usageResponse = await fetch(`/api/faq-categories/${id}`);
      const usageData = await usageResponse.json();
      const usageCount = Number(usageData?.category?.usageCount ?? 0);

      const confirmed = window.confirm(
        usageCount > 0
          ? `Kategori "${name}" sedang dipakai oleh ${usageCount} FAQ. Hapus kategori ini dan lepas dari FAQ terkait?`
          : `Hapus kategori "${name}"?`
      );

      if (!confirmed) {
        return;
      }

      const response = await fetch(`/api/faq-categories/${id}`, {
        method: "DELETE",
      });
      const data = await response.json();

      if (!response.ok || !data.success) {
        setMessage(data.message || "Gagal menghapus kategori.");
        return;
      }

      setMessage(data.message || "Kategori berhasil dihapus.");
      setCategories((current) => current.filter((category) => category.id !== id));
      if (activeFilter === String(id)) {
        setActiveFilter("all");
      }
      await fetchFaqs();
    } catch {
      setMessage("Terjadi kesalahan saat menghapus kategori.");
    }
  }

  const filteredFaqs = (() => {
    const baseFaqs = faqs.filter((faq) => {
      if (activeFilter === "all") {
        return true;
      }

      if (activeFilter === "no-answer") {
        return !faq.answer || faq.answer.trim() === "";
      }

      return faq.category_id === Number(activeFilter);
    });

    return baseFaqs;
  })();

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-black">
        <p className="text-sm text-zinc-600 dark:text-zinc-400">Memuat...</p>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen bg-zinc-50 px-4 py-16 text-zinc-900 dark:bg-black dark:text-zinc-100">
        <div className="mx-auto flex max-w-md flex-col rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
          <h1 className="text-2xl font-semibold">Login</h1>
          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
            Silakan masuk untuk melihat daftar FAQ.
          </p>

          <form onSubmit={handleSubmit} className="mt-8 space-y-4">
            <div>
              <label className="mb-1 block text-sm font-medium" htmlFor="username">
                Username
              </label>
              <input
                id="username"
                type="text"
                value={form.username}
                onChange={(event) => setForm({ ...form, username: event.target.value })}
                className="w-full rounded-lg border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900 dark:border-zinc-700 dark:bg-zinc-900"
                placeholder="Masukkan username"
                required
              />
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium" htmlFor="password">
                Password
              </label>
              <input
                id="password"
                type="password"
                value={form.password}
                onChange={(event) => setForm({ ...form, password: event.target.value })}
                className="w-full rounded-lg border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900 dark:border-zinc-700 dark:bg-zinc-900"
                placeholder="Masukkan password"
                required
              />
            </div>

            <button
              type="submit"
              disabled={isSubmitting}
              className="w-full rounded-lg bg-zinc-950 px-4 py-2.5 font-medium text-white transition hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-70 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-zinc-300"
            >
              {isSubmitting ? "Memproses..." : "Masuk"}
            </button>
          </form>

          {message ? (
            <p className={`mt-4 rounded-lg px-3 py-2 text-sm ${message.includes("berhasil") ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300" : "bg-rose-50 text-rose-700 dark:bg-rose-950 dark:text-rose-300"}`}>
              {message}
            </p>
          ) : null}
        </div>
      </div>
    );
  }

  return (
    <main className="min-h-screen bg-zinc-50 px-4 py-8 text-zinc-900 dark:bg-black dark:text-zinc-100">
      <div className="mx-auto flex max-w-5xl flex-col gap-6">
        <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
          <div>
            <p className="text-sm text-zinc-500 dark:text-zinc-400">Selamat datang</p>
            <h1 className="text-2xl font-semibold">{user.name}</h1>
            <p className="text-sm text-zinc-600 dark:text-zinc-400">@{user.username}</p>
          </div>
          <button
            onClick={handleLogout}
            className="rounded-lg border border-zinc-300 px-4 py-2 text-sm font-medium transition hover:bg-zinc-100 dark:border-zinc-700 dark:hover:bg-zinc-900"
          >
            Logout
          </button>
        </div>

        <section className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
          <div className="mb-6 flex items-center justify-between">
            <div>
              <h2 className="text-xl font-semibold">Admin FAQ</h2>
              <p className="text-sm text-zinc-600 dark:text-zinc-400">
                Kelola FAQ user G.A System
              </p>
            </div>
            <div className="flex items-center gap-3">
              <span className="rounded-full bg-zinc-100 px-3 py-1 text-sm dark:bg-zinc-800">
                {filteredFaqs.length} item
              </span>
              <Link
                href="/faq-form"
                className="rounded-lg bg-zinc-950 px-4 py-2 text-sm font-medium text-white transition hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-zinc-300"
              >
                Tambah FAQ
              </Link>
            </div>
          </div>

          {message ? (
            <p className={`mb-4 rounded-lg px-3 py-2 text-sm ${message.includes("berhasil") ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300" : "bg-rose-50 text-rose-700 dark:bg-rose-950 dark:text-rose-300"}`}>
              {message}
            </p>
          ) : null}

          <div className="mb-4 flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => setActiveFilter("all")}
              className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${activeFilter === "all" ? "bg-zinc-950 text-white dark:bg-zinc-100 dark:text-zinc-950" : "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`}
            >
              Semua
            </button>
            <button
              type="button"
              onClick={() => setActiveFilter("no-answer")}
              className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${activeFilter === "no-answer" ? "bg-zinc-950 text-white dark:bg-zinc-100 dark:text-zinc-950" : "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300"}`}
            >
              Belum ada jawaban
            </button>
            {categories.map((category) => (
              <div key={category.id} className="flex items-center rounded-full bg-zinc-100 pl-3 pr-1 py-1 dark:bg-zinc-800">
                <button
                  type="button"
                  onClick={() => setActiveFilter(String(category.id))}
                  className={`rounded-full px-2 py-1 text-sm font-medium transition ${activeFilter === String(category.id) ? "bg-zinc-950 text-white dark:bg-zinc-100 dark:text-zinc-950" : "text-zinc-700 dark:text-zinc-300"}`}
                >
                  {category.name}
                </button>
                <button
                  type="button"
                  onClick={() => void handleDeleteCategory(category.id, category.name)}
                  className="ml-1 rounded-full p-1 text-xs text-zinc-500 transition hover:bg-zinc-200 hover:text-zinc-900 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
                  aria-label={`Hapus kategori ${category.name}`}
                >
                  ×
                </button>
              </div>
            ))}
          </div>

          {filteredFaqs.length === 0 ? (
            <p className="text-sm text-zinc-600 dark:text-zinc-400">
              Belum ada data FAQ yang tersedia.
            </p>
          ) : (
            <div className="space-y-4">
              {filteredFaqs.map((faq) => (
                <article key={faq.id} className="rounded-xl border border-zinc-200 p-4 dark:border-zinc-800">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <h3 className="font-medium">{faq.question}</h3>
                    <div className="flex items-center gap-2">
                      <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${faq.is_active ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300" : "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300"}`}>
                        {faq.is_active ? "Active" : "Inactive"}
                      </span>
                      <span className="text-xs text-zinc-500">
                        {faq.category_name || `Kategori #${faq.category_id}`}
                      </span>
                    </div>
                  </div>
                  <p className="mt-2 text-sm leading-6 text-zinc-600 dark:text-zinc-400">
                    {faq.answer}
                  </p>
                  <div className="mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-zinc-500">
                    <div className="flex flex-wrap gap-4">
                      <span>Views: {faq.views}</span>
                      <span>Likes: {faq.likes}</span>
                      <span>Dislikes: {faq.dislikes}</span>
                      {faq.created_by ? <span>Dibuat oleh: {faq.created_by}</span> : null}
                      {faq.video_link ? (
                        <a
                          href={faq.video_link}
                          target="_blank"
                          rel="noreferrer"
                          className="max-w-[180px] truncate font-medium text-zinc-700 underline decoration-dotted underline-offset-2 dark:text-zinc-300"
                          title={faq.video_link}
                        >
                          {faq.video_link}
                        </a>
                      ) : null}
                    </div>
                    <div className="flex gap-2">
                      <Link
                        href={`/faq-edit/${faq.id}`}
                        className="rounded-lg border border-zinc-300 px-3 py-1.5 font-medium text-zinc-700 transition hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-900"
                      >
                        Edit
                      </Link>
                      <button
                        type="button"
                        onClick={() => void handleDeleteFaq(faq.id)}
                        className="rounded-lg border border-rose-300 px-3 py-1.5 font-medium text-rose-700 transition hover:bg-rose-50 dark:border-rose-800 dark:text-rose-300 dark:hover:bg-rose-950"
                      >
                        Hapus
                      </button>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </section>
      </div>
    </main>
  );
}