"use client";
/* eslint-disable @next/next/no-img-element */

import { format } from "date-fns";
import { CheckCircle2, ChevronLeft, ChevronRight, Loader2, Trash2, UploadCloud, X } from "lucide-react";
import { useEffect, useRef, useState, useActionState } from "react";
import { Topic } from "@/lib/types";
import { buildMediaAssets } from "@/lib/media";
import {
  deleteTopicAction,
  togglePublishAction,
  updateGeneratedDataAction,
} from "@/app/(protected)/posts/actions";

type TopicCardProps = {
  topic: Topic;
};

export default function TopicCard({ topic }: TopicCardProps) {
  const assets = buildMediaAssets(topic.photo_name);
  const [expanded, setExpanded] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [justToggled, setJustToggled] = useState<"publish" | "draft" | null>(null);
  const formRef = useRef<HTMLFormElement | null>(null);
  const deleteFormRef = useRef<HTMLFormElement | null>(null);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [savedId, setSavedId] = useState<number | null>(null);
  const [mediaModalOpen, setMediaModalOpen] = useState(false);
  const [mediaModalIndex, setMediaModalIndex] = useState(0);
  const [items, setItems] = useState(topic.generated_data ?? []);
  const [lastUpdated, submitUpdate, isUpdating] = useActionState<any>(updateGeneratedDataAction as any, null as any);

  const currentAsset = assets[mediaModalIndex];

  const openMediaModalAt = (index: number) => {
    if (!assets.length) return;
    setMediaModalIndex(index);
    setMediaModalOpen(true);
  };

  const closeMediaModal = () => {
    setMediaModalOpen(false);
  };

  const showPrevAsset = () => {
    if (!assets.length) return;
    setMediaModalIndex((prev) => (prev - 1 + assets.length) % assets.length);
  };

  const showNextAsset = () => {
    if (!assets.length) return;
    setMediaModalIndex((prev) => (prev + 1) % assets.length);
  };

  useEffect(() => {
    if (!justToggled) return;
    const timeout = setTimeout(() => setJustToggled(null), 4000);
    return () => clearTimeout(timeout);
  }, [justToggled]);

  useEffect(() => {
    if (!savedId) return;
    const timeout = setTimeout(() => setSavedId(null), 2500);
    return () => clearTimeout(timeout);
  }, [savedId]);

  useEffect(() => {
    if (!lastUpdated || typeof lastUpdated !== "object") return;
    const updatedId = (lastUpdated as any).id as number | undefined;
    if (!updatedId) return;
    setItems((prev) => prev.map((it) => (it.id === updatedId ? { ...it, ...lastUpdated } : it)));
    setEditingId(null);
    setSavedId(updatedId);
  }, [lastUpdated]);

  return (
    <article className="flex flex-col rounded-3xl border border-white/10 bg-white p-5 shadow-lg shadow-orange-500/10 dark:border-white/10 dark:bg-white/5">
      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <p className="text-xs uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">#{topic.id}</p>
          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
            {items?.[0]?.title ?? "Untitled topic"}
          </h3>
        </div>
        <span
          className={`rounded-2xl px-3 py-1 text-xs font-semibold ${
            topic.is_published
              ? "bg-emerald-500/20 text-emerald-700 dark:text-emerald-300"
              : "bg-amber-500/20 text-amber-700 dark:text-amber-200"
          }`}
        >
          {topic.is_published ? "Published" : "Draft"}
        </span>
      </header>

      {assets.length > 0 ? (
        <button
          type="button"
          onClick={() => openMediaModalAt(0)}
          className="mt-4 grid grid-cols-2 gap-3 rounded-2xl border border-transparent text-left transition hover:border-orange-500/40 hover:bg-slate-100 dark:hover:bg-white/5"
        >
          {assets.slice(0, 2).map((asset) => (
            <div
              key={asset.name}
              className="cursor-zoom-in overflow-hidden rounded-2xl border border-slate-200 bg-slate-100 dark:border-white/5 dark:bg-white/5"
            >
              {asset.isVideo ? (
                <video src={asset.url} className="h-40 w-full object-cover" muted controls={false} playsInline />
              ) : (
                <img src={asset.url} alt={asset.name} className="h-40 w-full object-cover" />
              )}
            </div>
          ))}
        </button>
      ) : (
        <div className="mt-4 rounded-2xl border border-dashed border-slate-200 p-6 text-center text-sm text-slate-500 dark:border-white/10 dark:text-slate-400">
          No media available for this topic.
        </div>
      )}

      <div className="mt-4 grid gap-4 text-xs text-slate-700 sm:grid-cols-3 dark:text-slate-300">
        <p>
          <span className="text-slate-500 dark:text-slate-500">Created:</span>{" "}
          {format(new Date(topic.created_at), "dd MMM yyyy HH:mm")}
        </p>
        <p>
          <span className="text-slate-500 dark:text-slate-500">Scheduled:</span>{" "}
          {topic.schedule_time ? format(new Date(topic.schedule_time), "dd MMM yyyy HH:mm") : "-"}
        </p>
        <p>
          <span className="text-slate-500 dark:text-slate-500">Status:</span> {topic.is_processing ? "Processing" : "Ready"}
        </p>
      </div>

      <div className="mt-4 rounded-2xl border border-slate-200 p-4 dark:border-white/5">
        <button
          type="button"
          className="text-sm font-semibold text-slate-900 dark:text-white"
          onClick={() => setExpanded((prev) => !prev)}
        >
          {expanded ? "Hide social media content" : "Show social media content"}
        </button>
        {expanded ? (
          <div className="mt-4 space-y-3 text-sm text-slate-700">
            {items.map((item) =>
              editingId === item.id ? (
                <form
                  key={item.id}
                  action={submitUpdate}
                  className="space-y-2 rounded-xl border border-white/10 bg-white p-3 shadow-md dark:border-white/10 dark:bg-white/5"
                  onSubmit={() => {
                    // handled in action state effect
                  }}
                >
                  <input type="hidden" name="generatedDataId" value={item.id} />
                  <p className="text-xs uppercase tracking-[0.3em] text-orange-300">{item.platform}</p>
                  <label className="mt-2 block text-xs text-slate-900 dark:text-slate-300">
                    <span className="mb-1 block text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">
                      Title
                    </span>
                    <input
                      name="title"
                      defaultValue={item.title ?? ""}
                    className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-900 outline-none ring-2 ring-transparent transition focus:ring-orange-500/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
                      placeholder="Enter a headline for this platform..."
                    />
                  </label>
                  <label className="mt-1 block text-xs text-slate-900 dark:text-slate-300">
                    <span className="mb-1 block text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">
                      Copy
                    </span>
                    <textarea
                      name="content"
                      defaultValue={item.content ?? ""}
                    className="min-h-[80px] w-full resize-y rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-900 outline-none ring-2 ring-transparent transition focus:ring-orange-500/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
                      placeholder="Edit the social media text for this platform..."
                    />
                  </label>
                  <label className="mt-1 block text-xs text-slate-900 dark:text-slate-300">
                    <span className="mb-1 block text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">
                      Hashtags
                    </span>
                    <input
                      name="hashtag"
                      defaultValue={item.hashtag ?? ""}
                    className="w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs text-slate-900 outline-none ring-2 ring-transparent transition focus:ring-orange-500/50 dark:border-white/10 dark:bg:white/5 dark:text-white"
                      placeholder="#tags separated by spaces"
                    />
                  </label>
                  <label className="mt-1 block text-xs text-slate-900 dark:text-slate-300">
                    <span className="mb-1 block text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">
                      Call to action
                    </span>
                    <input
                      name="action"
                      defaultValue={item.action ?? ""}
                    className="w-full rounded-xl border border-slate-200 bg:white px-3 py-2 text-xs text-slate-900 outline-none ring-2 ring-transparent transition focus:ring-orange-500/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
                      placeholder="E.g. Tap the link in bio to shop now"
                    />
                  </label>
                  <div className="mt-2 flex justify-end gap-2">
                    <button
                      type="button"
                      onClick={() => setEditingId(null)}
                      className="rounded-2xl border border-slate-200 px-3 py-1 text-[0.7rem] font-semibold text-slate-900 hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-white"
                    >
                      Cancel
                    </button>
                    <button
                      type="submit"
                      className="rounded-2xl bg-orange-500 px-3 py-1 text-[0.7rem] font-semibold text-slate-950 shadow-md shadow-orange-500/30 hover:brightness-110 disabled:opacity-60"
                    >
                      Save changes
                    </button>
                  </div>
                </form>
              ) : (
                <div
                  key={item.id}
                  className="space-y-2 rounded-xl border border-white/10 bg-white p-3 text-slate-700 transition hover:border-orange-500/40"
                >
                  <div className="flex items-center justify-between gap-2">
                    <p className="text-xs uppercase tracking-[0.3em] text-orange-600">{item.platform}</p>
                    <button
                      type="button"
                      onClick={() => setEditingId(item.id)}
                      className="rounded-2xl border border-slate-200 px-3 py-1 text-[0.7rem] font-semibold text-slate-700 hover:border-orange-400 hover:text-slate-900"
                    >
                      Edit
                    </button>
                  </div>
                  <p className="mt-1 text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">Title</p>
                  <p className="text-sm font-semibold text-slate-900">{item.title}</p>
                  <p className="mt-2 text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">Copy</p>
                  <p className="text-sm text-slate-700 whitespace-pre-line">{item.content}</p>
                  {item.hashtag ? (
                    <>
                      <p className="mt-2 text-[0.7rem] uppercase tracking-[0.2em] text-slate-500">Hashtags</p>
                      <p className="text-xs text-orange-600">{item.hashtag}</p>
                    </>
                  ) : null}
                  {item.action ? (
                    <>
                  <p className="mt-2 text-[0.7rem] uppercase tracking-[0.2em] text-slate-400 md:text-slate-500">
                    Call to action
                  </p>
                      <p className="text-xs text-slate-600">{item.action}</p>
                    </>
                  ) : null}
                  {savedId === item.id ? (
                    <p className="mt-2 text-[0.7rem] font-semibold text-emerald-600 dark:text-emerald-300">Saved.</p>
                  ) : null}
                </div>
              )
            )}
          </div>
        ) : null}
      </div>

      <footer className="mt-6 flex flex-wrap gap-3">
        <form ref={formRef} action={togglePublishAction}>
          <input type="hidden" name="topicId" value={topic.id} />
          <button
            type="button"
            onClick={() => setConfirmOpen(true)}
            className="flex items-center gap-2 rounded-2xl bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-slate-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
          >
            <UploadCloud className="h-4 w-4" />
            {topic.is_published ? "Move to drafts" : "Publish"}
          </button>
        </form>

        <form ref={deleteFormRef} action={deleteTopicAction}>
          <input type="hidden" name="topicId" value={topic.id} />
          <button
            type="button"
            onClick={() => setDeleteConfirmOpen(true)}
            className="flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:border-rose-400 dark:border-white/10 dark:text-rose-200 dark:hover:border-rose-400/60 dark:hover:text-white"
          >
            <Trash2 className="h-4 w-4" />
            Delete
          </button>
        </form>

        {topic.is_processing ? (
          <div className="flex items-center gap-2 rounded-2xl bg-amber-500/10 px-4 py-2 text-xs text-amber-700 dark:text-amber-200">
            <Loader2 className="h-3 w-3 animate-spin" />
            Waiting for regeneration
          </div>
        ) : (
          <div className="flex items-center gap-2 rounded-2xl bg-emerald-500/10 px-4 py-2 text-xs text-emerald-700 dark:text-emerald-200">
            <CheckCircle2 className="h-3 w-3" />
            Media ready
          </div>
        )}
      </footer>

      {mediaModalOpen && currentAsset ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 p-4"
          onClick={closeMediaModal}
        >
          <div
            className="relative w-full max-w-5xl rounded-3xl border border-white/10 bg-slate-900/95 p-4 shadow-2xl shadow-slate-950/80"
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              onClick={closeMediaModal}
              className="absolute right-4 top-4 rounded-full bg-white/10 p-1.5 text-slate-100 hover:bg-white/20"
              aria-label="Close media preview"
            >
              <X className="h-4 w-4" />
            </button>

            <div className="flex items-center justify-between gap-4">
              <button
                type="button"
                onClick={showPrevAsset}
                disabled={assets.length <= 1}
                className="hidden h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-100 transition hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white/5 md:flex"
                aria-label="Previous media"
              >
                <ChevronLeft className="h-5 w-5" />
              </button>

              <div className="flex-1">
                <div className="mx-auto aspect-video max-h-[480px] overflow-hidden rounded-2xl border border-white/10 bg-black/60">
                  {currentAsset.isVideo ? (
                    <video
                      src={currentAsset.url}
                      className="h-full w-full object-contain"
                      controls
                      autoPlay
                      playsInline
                    />
                  ) : (
                    <img
                      src={currentAsset.url}
                      alt={currentAsset.name}
                      className="h-full w-full object-contain"
                    />
                  )}
                </div>
                {assets.length > 1 ? (
                  <div className="mt-4 flex flex-wrap justify-center gap-2">
                    {assets.map((asset, index) => (
                      <button
                        key={asset.name}
                        type="button"
                        onClick={() => setMediaModalIndex(index)}
                        className={`h-14 w-14 overflow-hidden rounded-xl border ${
                          index === mediaModalIndex ? "border-orange-500" : "border-white/10"
                        } bg-white/5`}
                        aria-label={`Show media ${index + 1}`}
                      >
                        {asset.isVideo ? (
                          <video src={asset.url} className="h-full w-full object-cover" muted playsInline />
                        ) : (
                          <img src={asset.url} alt={asset.name} className="h-full w-full object-cover" />
                        )}
                      </button>
                    ))}
                  </div>
                ) : null}
              </div>

              <button
                type="button"
                onClick={showNextAsset}
                disabled={assets.length <= 1}
                className="hidden h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-100 transition hover:bg-white/10 disabled:opacity-40 disabled:hover:bg-white/5 md:flex"
                aria-label="Next media"
              >
                <ChevronRight className="h-5 w-5" />
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {confirmOpen ? (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/10 p-4">
              <div className="w-full max-w-sm rounded-3xl border border-white/10 bg-white p-5 text-sm text-slate-900 shadow-2xl shadow-orange-500/10 dark:border-white/10 dark:bg-white/5 dark:text-white">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-[0.65rem] uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
                      Confirm action
                    </p>
                    <p className="mt-2 text-base font-semibold">
                      {topic.is_published
                        ? "Move this post back to drafts?"
                        : "Publish this content to your social platforms?"}
                    </p>
                    <p className="mt-2 text-xs text-slate-600 dark:text-slate-400">
                      If you confirm, this content will be prepared for publishing across your
                      connected social media channels. You can always adjust the status again later.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setConfirmOpen(false)}
                    className="rounded-full bg-slate-100 p-1 text-slate-500 hover:bg-slate-200 hover:text-slate-900 dark:bg-white/10 dark:text-white"
                    aria-label="Close confirmation"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </div>

                <div className="mt-5 flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={() => {
                      setConfirmOpen(false);
                      formRef.current?.requestSubmit();
                      setJustToggled(topic.is_published ? "draft" : "publish");
                    }}
                    className="inline-flex flex-1 items-center justify-center rounded-2xl bg-gradient-to-r from-emerald-500 to-teal-500 px-4 py-2 text-xs font-semibold text-white shadow-md shadow-emerald-500/30 hover:brightness-110"
                  >
                    {topic.is_published ? "Yes, move to drafts" : "Yes, publish to channels"}
                  </button>
                  <button
                    type="button"
                    onClick={() => setConfirmOpen(false)}
                    className="inline-flex flex-1 items-center justify-center rounded-2xl border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-900 hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-white"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </div>
          ) : null}

          {deleteConfirmOpen ? (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/10 p-4">
              <div className="w-full max-w-sm rounded-3xl border border-rose-500/40 bg-white p-5 text-sm text-slate-900 shadow-2xl shadow-rose-500/10 dark:bg-white/5 dark:text-white">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-[0.65rem] uppercase tracking-[0.35em] text-rose-600">
                      Delete post
                    </p>
                    <p className="mt-2 text-base font-semibold text-slate-900">Are you sure you want to delete this post?</p>
                    <p className="mt-2 text-xs text-slate-600">
                      This will remove the topic and all generated social media content from this dashboard. This
                      action cannot be undone.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setDeleteConfirmOpen(false)}
                    className="rounded-full bg-slate-100 p-1 text-slate-500 hover:bg-slate-200 hover:text-slate-900 dark:bg-white/10 dark:text-white"
                    aria-label="Close delete confirmation"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </div>

                <div className="mt-5 flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={async () => {
                      setDeleteConfirmOpen(false);
                      try {
                        await fetch(`/api/topics/${topic.id}`, { method: "DELETE" });
                        if (typeof window !== "undefined") {
                          window.dispatchEvent(new Event("topics:refresh"));
                        }
                      } catch {}
                    }}
                    className="inline-flex flex-1 items-center justify-center rounded-2xl bg-rose-600 px-4 py-2 text-xs font-semibold text-white shadow-md shadow-rose-900/50 hover:brightness-110"
                  >
                    Yes, delete permanently
                  </button>
                  <button
                    type="button"
                    onClick={() => setDeleteConfirmOpen(false)}
                    className="inline-flex flex-1 items-center justify-center rounded-2xl border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-900 hover:border-slate-300"
                  >
                    Cancel
                  </button>
                </div>
              </div>
            </div>
          ) : null}

          {justToggled ? (
            <div className="pointer-events-none fixed inset-x-0 top-16 z-40 flex justify-center px-4">
              <div className="pointer-events-auto flex max-w-md items-start gap-3 rounded-2xl border border-emerald-500/40 bg-emerald-500/10 px-4 py-3 text-xs text-emerald-50 shadow-lg shadow-emerald-500/30 backdrop-blur">
                <div className="mt-0.5">
                  <CheckCircle2 className="h-4 w-4 text-emerald-300" />
                </div>
                <div>
                  <p className="text-[0.65rem] uppercase tracking-[0.3em] text-emerald-300/90">
                    Status
                  </p>
                  <p className="mt-1 text-sm font-semibold">
                    {justToggled === "publish"
                      ? "Publish webhook requested for this post."
                      : "Post moved back to drafts."}
                  </p>
                  <p className="mt-1 text-[0.7rem] text-emerald-100/80">
                    The list will refresh automatically after processing.
                  </p>
                </div>
              </div>
            </div>
          ) : null}
    </article>
  );
}