"use client";

import { useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, Paperclip, Pencil, Plus, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils/cn";
import { newsApi } from "@/lib/api/client";

interface NewsItem {
  id: string;
  titleHi: string;
  titleEn?: string;
  bodyHi?: string;
  bodyEn?: string;
  postedOn: string;
  linkUrl?: string;
  hasDocumentEn: boolean;
  documentEnName?: string;
  hasDocumentHi: boolean;
  documentHiName?: string;
  published: boolean;
}

const EMPTY = {
  titleHi: "",
  titleEn: "",
  bodyHi: "",
  bodyEn: "",
  postedOn: new Date().toISOString().slice(0, 10),
  linkUrl: "",
  published: false,
};

const inputCls =
  "w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500";

export default function AdminNewsPage() {
  const queryClient = useQueryClient();
  const [editing, setEditing] = useState<string | null>(null);
  const [form, setForm] = useState({ ...EMPTY });
  const [showForm, setShowForm] = useState(false);

  const { data: items = [], isLoading } = useQuery<NewsItem[]>({
    queryKey: ["admin-news"],
    queryFn: async () => (await newsApi.listAll()).data ?? [],
  });

  const refresh = () => {
    queryClient.invalidateQueries({ queryKey: ["admin-news"] });
    queryClient.invalidateQueries({ queryKey: ["public-news"] });
  };

  const save = useMutation({
    mutationFn: () =>
      editing ? newsApi.update(editing, form) : newsApi.create(form),
    onSuccess: () => {
      toast.success(editing ? "सूचना अद्यतन / Notice updated" : "सूचना जोड़ी गई / Notice added");
      closeForm();
      refresh();
    },
    onError: (err: unknown) => {
      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      toast.error(msg || "सहेजने में त्रुटि / Could not save the notice");
    },
  });

  const remove = useMutation({
    mutationFn: (id: string) => newsApi.remove(id),
    onSuccess: () => {
      toast.success("सूचना हटाई गई / Notice removed");
      refresh();
    },
    onError: () => toast.error("हटाने में त्रुटि / Could not remove the notice"),
  });

  function openNew() {
    setEditing(null);
    setForm({ ...EMPTY });
    setShowForm(true);
  }

  function openEdit(item: NewsItem) {
    setEditing(item.id);
    setForm({
      titleHi: item.titleHi ?? "",
      titleEn: item.titleEn ?? "",
      bodyHi: item.bodyHi ?? "",
      bodyEn: item.bodyEn ?? "",
      postedOn: item.postedOn,
      linkUrl: item.linkUrl ?? "",
      published: item.published,
    });
    setShowForm(true);
  }

  function closeForm() {
    setShowForm(false);
    setEditing(null);
    setForm({ ...EMPTY });
  }

  return (
    <div className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
      <div className="mb-6 flex items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">
            समाचार <span className="text-lg font-normal text-gray-400">/ News</span>
          </h1>
          <p className="mt-0.5 text-sm text-gray-500">
            सूचना डेस्क के समाचार पृष्ठ पर दिखाई देने वाली सूचनाएँ
          </p>
        </div>
        <button
          onClick={openNew}
          className="inline-flex shrink-0 items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700"
        >
          <Plus className="h-4 w-4" /> नई सूचना
        </button>
      </div>

      {showForm && (
        <div className="mb-6 rounded-2xl border border-indigo-100 bg-white p-5 shadow-sm">
          <div className="mb-4 flex items-center justify-between">
            <h2 className="font-semibold text-gray-900">
              {editing ? "सूचना संपादित करें / Edit notice" : "नई सूचना / New notice"}
            </h2>
            <button onClick={closeForm} className="text-gray-400 hover:text-gray-600">
              <X className="h-4 w-4" />
            </button>
          </div>

          <div className="space-y-3">
            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">शीर्षक (हिन्दी) *</label>
                <input
                  className={inputCls}
                  value={form.titleHi}
                  onChange={(e) => setForm({ ...form, titleHi: e.target.value })}
                  placeholder="पीएच.डी. उपाधि हेतु न्यूनतम मानक"
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">Title (English)</label>
                <input
                  className={inputCls}
                  value={form.titleEn}
                  onChange={(e) => setForm({ ...form, titleEn: e.target.value })}
                  placeholder="Minimum Standards for the Award of a Ph.D."
                />
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">
                  तिथि / Date *
                  <span className="ml-1 font-normal text-gray-400">— परिपत्र पर अंकित तिथि</span>
                </label>
                <input
                  type="date"
                  className={inputCls}
                  value={form.postedOn}
                  onChange={(e) => setForm({ ...form, postedOn: e.target.value })}
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">
                  लिंक / Link <span className="font-normal text-gray-400">(वैकल्पिक)</span>
                </label>
                <input
                  className={inputCls}
                  value={form.linkUrl}
                  onChange={(e) => setForm({ ...form, linkUrl: e.target.value })}
                  placeholder="https://www.ugc.gov.in/…"
                />
              </div>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">विवरण (हिन्दी)</label>
                <textarea
                  className={cn(inputCls, "h-20 resize-none")}
                  value={form.bodyHi}
                  onChange={(e) => setForm({ ...form, bodyHi: e.target.value })}
                />
              </div>
              <div>
                <label className="mb-1 block text-xs font-medium text-gray-500">Description (English)</label>
                <textarea
                  className={cn(inputCls, "h-20 resize-none")}
                  value={form.bodyEn}
                  onChange={(e) => setForm({ ...form, bodyEn: e.target.value })}
                />
              </div>
            </div>

            <label className="flex items-center gap-2 text-sm text-gray-700">
              <input
                type="checkbox"
                checked={form.published}
                onChange={(e) => setForm({ ...form, published: e.target.checked })}
                className="h-4 w-4 rounded border-gray-300 text-indigo-600"
              />
              सार्वजनिक पृष्ठ पर दिखाएँ / Show on the public page
            </label>

            <div className="flex items-center gap-2 pt-1">
              <button
                onClick={() => save.mutate()}
                disabled={!form.titleHi.trim() || !form.postedOn || save.isPending}
                className="inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:bg-gray-300"
              >
                {save.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
                सहेजें / Save
              </button>
              <button onClick={closeForm} className="rounded-lg px-3 py-2 text-sm text-gray-500 hover:bg-gray-100">
                रद्द करें
              </button>
            </div>
            {!editing && (
              <p className="text-xs text-gray-400">
                दस्तावेज़ सहेजने के बाद जोड़े जा सकते हैं / Documents can be attached once the notice is saved.
              </p>
            )}
          </div>
        </div>
      )}

      <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm">
        {isLoading ? (
          <div className="flex items-center justify-center gap-2 py-12">
            <Loader2 className="h-5 w-5 animate-spin text-indigo-500" />
            <span className="text-sm text-gray-400">लोड हो रहा है...</span>
          </div>
        ) : items.length === 0 ? (
          <div className="py-12 text-center text-sm text-gray-400">कोई सूचना नहीं / No notices yet</div>
        ) : (
          <div className="divide-y divide-gray-50">
            {items.map((item) => (
              <NewsRow
                key={item.id}
                item={item}
                onEdit={() => openEdit(item)}
                onDelete={() => {
                  if (confirm(`"${item.titleHi}" हटाएँ? / Remove this notice?`)) remove.mutate(item.id);
                }}
                onChanged={refresh}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function NewsRow({
  item,
  onEdit,
  onDelete,
  onChanged,
}: {
  item: NewsItem;
  onEdit: () => void;
  onDelete: () => void;
  onChanged: () => void;
}) {
  const [busy, setBusy] = useState<"hi" | "en" | null>(null);
  const enInput = useRef<HTMLInputElement>(null);
  const hiInput = useRef<HTMLInputElement>(null);

  async function upload(language: "hi" | "en", file?: File | null) {
    if (!file) return;
    setBusy(language);
    try {
      await newsApi.uploadDocument(item.id, language, file);
      toast.success("दस्तावेज़ संलग्न / Document attached");
      onChanged();
    } catch (err: unknown) {
      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      toast.error(msg || "संलग्न करने में त्रुटि / Could not attach the document");
    }
    setBusy(null);
  }

  async function detach(language: "hi" | "en") {
    setBusy(language);
    try {
      await newsApi.removeDocument(item.id, language);
      onChanged();
    } catch {
      toast.error("हटाने में त्रुटि / Could not detach the document");
    }
    setBusy(null);
  }

  const slot = (language: "hi" | "en", has: boolean, name: string | undefined, ref: React.RefObject<HTMLInputElement>) => (
    <div className="flex items-center gap-1.5">
      <input
        ref={ref}
        type="file"
        accept=".pdf,.doc,.docx"
        className="hidden"
        onChange={(e) => upload(language, e.target.files?.[0])}
      />
      {has ? (
        <span className="inline-flex items-center gap-1 rounded-md bg-emerald-50 px-2 py-1 text-[11px] font-medium text-emerald-700">
          <Paperclip className="h-3 w-3" />
          {language === "en" ? "English" : "हिन्दी"}
          <button onClick={() => detach(language)} className="ml-0.5 text-emerald-500 hover:text-red-600" title={name}>
            <X className="h-3 w-3" />
          </button>
        </span>
      ) : (
        <button
          onClick={() => ref.current?.click()}
          disabled={busy === language}
          className="inline-flex items-center gap-1 rounded-md border border-dashed border-gray-300 px-2 py-1 text-[11px] text-gray-500 hover:border-indigo-400 hover:text-indigo-600 disabled:opacity-50"
        >
          {busy === language ? <Loader2 className="h-3 w-3 animate-spin" /> : <Paperclip className="h-3 w-3" />}
          {language === "en" ? "English" : "हिन्दी"}
        </button>
      )}
    </div>
  );

  return (
    <div className="flex flex-col gap-3 px-5 py-4 transition-colors hover:bg-gray-50 sm:flex-row sm:items-center">
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="text-[11px] font-medium text-gray-400">{item.postedOn}</span>
          <span
            className={cn(
              "rounded-full px-2 py-0.5 text-[10px] font-medium",
              item.published ? "bg-emerald-100 text-emerald-700" : "bg-amber-100 text-amber-700"
            )}
          >
            {item.published ? "प्रकाशित" : "ड्राफ़्ट"}
          </span>
        </div>
        <p className="mt-0.5 truncate text-sm font-medium text-gray-900">{item.titleHi}</p>
        {item.titleEn && <p className="truncate text-xs text-gray-400">{item.titleEn}</p>}
      </div>

      <div className="flex items-center gap-2">
        {slot("en", item.hasDocumentEn, item.documentEnName, enInput)}
        {slot("hi", item.hasDocumentHi, item.documentHiName, hiInput)}
      </div>

      <div className="flex shrink-0 items-center gap-1">
        <button onClick={onEdit} className="rounded-lg p-2 text-gray-400 hover:bg-indigo-50 hover:text-indigo-600" title="संपादित करें">
          <Pencil className="h-4 w-4" />
        </button>
        <button onClick={onDelete} className="rounded-lg p-2 text-gray-400 hover:bg-red-50 hover:text-red-600" title="हटाएँ">
          <Trash2 className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}