"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import { X, Users, Loader2 } from "lucide-react";
import { contentMgmtService, type SubscriberItem } from "@/services/contentActionService";

interface Props { onClose: () => void }

export function SubscriberListSheet({ onClose }: Props) {
  const [subscribers, setSubscribers] = useState<SubscriberItem[]>([]);
  const [loading, setLoading]         = useState(true);

  useEffect(() => {
    document.body.style.overflow = "hidden";
    contentMgmtService.getSubscriberList()
      .then(setSubscribers)
      .catch(() => {})
      .finally(() => setLoading(false));
    return () => { document.body.style.overflow = ""; };
  }, []);

  return (
    <>
      <div className="fixed inset-0 z-[200]" style={{ background: "rgba(0,0,0,0.74)", backdropFilter: "blur(10px)", animation: "sl-fade 0.2s ease both" }} onClick={onClose} />
      <div className="fixed z-[201] bottom-0 left-0 right-0 flex flex-col" style={{ maxWidth: "680px", margin: "0 auto", maxHeight: "80vh", background: "var(--sheet-bg)", borderRadius: "20px 20px 0 0", border: "1px solid var(--sheet-border)", borderBottom: "none", boxShadow: "0 -24px 64px rgba(0,0,0,0.7)", animation: "sl-up 0.35s cubic-bezier(0.32,1.2,0.56,1) both" }}>
        <div className="flex justify-center pt-3"><div className="w-9 h-[3px] rounded-full" style={{ background: "var(--sheet-handle)" }} /></div>
        <div className="flex items-center justify-between px-5 py-3 shrink-0" style={{ borderBottom: "1px solid var(--border)" }}>
          <div className="flex items-center gap-2">
            <Users size={15} color="var(--accent)" strokeWidth={2} />
            <span className="text-sm font-bold" style={{ color: "var(--text-primary)" }}>Subscribers</span>
            {subscribers.length > 0 && (
              <span className="text-[9px] font-bold px-2 py-0.5 rounded-full" style={{ background: "rgba(var(--accent-rgb),0.12)", color: "var(--accent)" }}>{subscribers.length}</span>
            )}
          </div>
          <button onClick={onClose} className="w-7 h-7 rounded-full flex items-center justify-center" style={{ background: "var(--btn-ghost-hover)" }}>
            <X size={13} color="#888" />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto pb-8">
          {loading ? (
            <div className="flex justify-center py-12"><Loader2 size={22} className="animate-spin" color="rgba(var(--accent-rgb),0.6)" /></div>
          ) : subscribers.length === 0 ? (
            <div className="flex flex-col items-center gap-3 py-14">
              <Users size={28} color="#333" strokeWidth={1.2} />
              <p className="text-xs" style={{ color: "var(--text-muted)" }}>No subscribers yet</p>
            </div>
          ) : (
            subscribers.map((s, i) => (
              <div key={s.id} className="flex items-center gap-3 px-5 py-3.5" style={{ animation: `sl-item 0.25s ease both ${i * 40}ms`, borderBottom: "1px solid var(--border)" }}>
                <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 flex items-center justify-center text-sm font-bold" style={{ background: "var(--card)", color: "var(--text-primary)" }}>
                  {s.avatar
                    ? <Image src={s.avatar} alt={s.name} width={40} height={40} className="w-full h-full object-cover" unoptimized />
                    : (s.name[0] || "?").toUpperCase()
                  }
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[13px] font-semibold truncate" style={{ color: "var(--text-primary)" }}>{s.name}</p>
                  {s.subCount > 0 && <p className="text-[10px] mt-0.5" style={{ color: "var(--text-muted)" }}>{s.subCount.toLocaleString()} subscribers</p>}
                </div>
              </div>
            ))
          )}
        </div>
      </div>
      <style>{`
        @keyframes sl-fade { from{opacity:0} to{opacity:1} }
        @keyframes sl-up   { from{transform:translateY(100%)} to{transform:translateY(0)} }
        @keyframes sl-item { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }
      `}</style>
    </>
  );
}