"use client";

import { useEffect, useState } from "react";
import { ArrowUp, Share2, X, CupSoda } from "lucide-react";
import { useApp } from "@/components/app-context";
import { toast } from "@/hooks/use-toast";

export function ScrollTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (!show) return null;
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      className="fixed bottom-6 right-6 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-[#0b7a43] text-white shadow-xl shadow-emerald-900/25 transition-transform hover:scale-105 active:scale-95"
      aria-label="Back to top"
    >
      <ArrowUp className="h-5 w-5" />
    </button>
  );
}

export function TeaPopup() {
  const { T } = useApp();
  const [show, setShow] = useState(false);
  const [closed, setClosed] = useState(true);

  useEffect(() => {
    if (localStorage.getItem("fd-tea-dismissed")) return;
    const t = setTimeout(() => { setShow(true); setClosed(false); }, 6000);
    return () => clearTimeout(t);
  }, []);

  const dismiss = () => {
    setShow(false);
    localStorage.setItem("fd-tea-dismissed", "1");
    setTimeout(() => setClosed(true), 400);
  };

  const share = async () => {
    try {
      if (navigator.share) await navigator.share({ title: "FileDeck", url: location.href });
      else {
        await navigator.clipboard.writeText(location.href);
        toast({ title: T("linkCopied") });
      }
    } catch {}
  };

  if (closed) return null;

  return (
    <div
      className={`fixed bottom-5 left-4 z-40 w-[330px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/10 transition-all duration-300 dark:bg-[#12201a] dark:ring-white/10 ${show ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-6 opacity-0"}`}
      role="dialog"
      aria-label={T("teaTitle")}
    >
      <div className="h-1.5 w-full bg-[linear-gradient(90deg,#7c2d12,#b45309,#d97706,#f59e0b,#fbbf24,#fde68a,#a7f3d0,#34d399)]" />
      <div className="relative p-4">
        <button onClick={dismiss} className="absolute right-3 top-3 rounded-full p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/10" aria-label={T("close")}>
          <X className="h-4 w-4" />
        </button>
        <div className="flex items-start gap-3">
          <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[#fef3e2] text-2xl">🥤</span>
          <div className="pr-4">
            <div className="text-[14.5px] font-extrabold text-zinc-900 dark:text-white">{T("teaTitle")}</div>
            <p className="mt-1 text-[12px] leading-5 text-zinc-500 dark:text-zinc-400">{T("teaBody")}</p>
          </div>
        </div>
        <button className="mt-3 flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-[#0b7a43] text-[13.5px] font-bold text-white transition-colors hover:bg-[#096c3b]">
          <CupSoda className="h-4 w-4" /> {T("teaCta")} <span className="text-[11px]">↗</span>
        </button>
        <div className="mt-2.5 flex items-center gap-2">
          <p className="flex-1 text-[11px] leading-4 text-zinc-500 dark:text-zinc-400">{T("teaFriend")}</p>
          <button onClick={share} className="flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-zinc-200 px-2.5 text-[11.5px] font-bold text-zinc-600 hover:bg-zinc-50 dark:border-white/15 dark:text-zinc-300 dark:hover:bg-white/5">
            <Share2 className="h-3.5 w-3.5" /> {T("tellFriend")}
          </button>
        </div>
        <div className="mt-2.5 flex items-center justify-between text-[10.5px] text-zinc-400">
          <span>{T("teaNote")}</span>
          <button onClick={dismiss} className="font-bold hover:text-zinc-600">{T("maybeLater")}</button>
        </div>
      </div>
    </div>
  );
}