"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { getTopicConfig } from "../config";
import { isPaid } from "@/app/cloudphone/lib/payment";
import { InstantQaVipModal } from "@/app/components/InstantQaVipModal";

type TopicFooterProps = {
  topicId: string;
};

const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";

export function TopicFooter({ topicId }: TopicFooterProps) {
  const config = getTopicConfig(topicId);
  const [paid, setPaid] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);

  useEffect(() => {
    setPaid(isPaid());
    const onPayUpdate = () => setPaid(isPaid());
    window.addEventListener("pay:updated", onPayUpdate);
    return () => window.removeEventListener("pay:updated", onPayUpdate);
  }, []);

  return (
    <footer className="border-t border-[var(--border)] py-6 sm:py-8">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <div className="mb-4 flex flex-wrap items-center justify-center gap-4">
          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            返回首页
          </Link>
          <Link
            href="/#topics"
            className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
          >
            模块列表
          </Link>
          {paid ? (
            <a
              href={CHAT_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
              </svg>
              即时问答
            </a>
          ) : (
            <button
              type="button"
              onClick={() => setModalOpen(true)}
              className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
              即时问答
            </button>
          )}
        </div>
        <div className="text-center text-sm text-[var(--muted-foreground)]">
          {config ? `${config.icon} ${config.title} · 异度星球` : "异度星球 · 数字游民社群"}
        </div>
      </div>
      <InstantQaVipModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </footer>
  );
}
