import { X } from "lucide-react";
import type { Comment, User } from "../types";
import { CommentList } from "./CommentList";

interface CommentPanelProps {
  open: boolean;
  onClose: () => void;
  author: User;
  createdAt: string | Date;
  comments: Comment[];
  mounted: boolean;
}

export function CommentPanel({ open, onClose, author, createdAt, comments, mounted }: CommentPanelProps) {
  return (
    <>
      {/* 横屏评论面板：并排分栏 */}
      <aside
        className={`
          hidden landscape:flex
          z-30 flex-col bg-[rgba(22,22,22,0.92)] text-white
          relative h-full overflow-hidden
          ${mounted ? "transition-[width] duration-200 ease-out" : ""}
          ${open ? "w-[min(420px,36vw)] border-l border-white/10" : "w-0"}
        `}
      >
        <div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
          <button
            className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
            onClick={onClose}
            aria-label="关闭评论"
          >
            <X size={18} />
          </button>
          <div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
        </div>

        <div className="p-3 overflow-auto">
          <CommentList author={author} createdAt={createdAt} comments={comments} />
        </div>
      </aside>

      {/* 竖屏评论面板：bottom sheet */}
      <aside
        className={`
          landscape:hidden
          z-30 flex flex-col bg-[rgba(22,22,22,0.92)] text-white
          fixed inset-x-0 bottom-0 w-full h-[min(80vh,88dvh)]
          ${mounted ? "transition-transform duration-200 ease-out" : ""}
          border-t border-white/10
          ${open ? "translate-y-0" : "translate-y-full"}
        `}
      >
        <div className="flex items-center justify-between px-3 py-3 border-b border-white/10">
          <div className="text-white font-semibold">评论 {comments.length > 0 ? `(${comments.length})` : ""}</div>
          <button
            className="w-8 h-8 inline-flex items-center justify-center rounded-full bg-white/15 text-white/90 border border-white/20 hover:bg-white/25 transition-colors"
            onClick={onClose}
            aria-label="关闭评论"
          >
            <X size={18} />
          </button>
        </div>

        <div className="p-3 overflow-auto">
          <CommentList author={author} createdAt={createdAt} comments={comments} />
        </div>
      </aside>
    </>
  );
}