'use client';

import type { ReactNode } from "react";
import { Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

type AiBridgePanelProps = {
  title: string;
  subtitle: string;
  status?: string;
  onClose?: () => void;
  primaryAction?: ReactNode;
  secondaryActions?: ReactNode;
  children: ReactNode;
  sidebar?: ReactNode;
  className?: string;
  scrollBody?: boolean;
  scrollSidebar?: boolean;
};

// 通用 AI 面板壳：统一视觉和双栏结构，具体状态由各场景 adapter 提供。
export function AiBridgePanel({
  title,
  subtitle,
  status,
  onClose,
  primaryAction,
  secondaryActions,
  children,
  sidebar,
  className,
  scrollBody = true,
  scrollSidebar = true,
}: AiBridgePanelProps) {
  return (
    <section
      className={cn(
        "flex h-[calc(100vh-112px)] min-h-[640px] w-full overflow-hidden rounded-[28px] border border-white/10 bg-[#070b14] text-white shadow-[0_24px_80px_rgba(0,0,0,0.45)]",
        className,
      )}
    >
      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex items-center gap-4 border-b border-white/8 px-5 py-4">
          <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-sky-400/30 bg-sky-400/10 text-sky-100">
            <Sparkles className="h-5 w-5" />
          </div>

          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <span className="text-xs font-semibold uppercase tracking-[0.24em] text-sky-200/70">MNOTE</span>
              <span className="h-1 w-1 rounded-full bg-white/25" />
              <span className="text-sm text-white/60">{subtitle}</span>
            </div>
            <div className="mt-1 flex flex-wrap items-center gap-2">
              <h1 className="text-lg font-semibold tracking-tight text-white">{title}</h1>
              {status ? (
                <span className="rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1 text-xs text-sky-100">
                  {status}
                </span>
              ) : null}
            </div>
          </div>

          <div className="ml-auto flex items-center gap-2">
            {secondaryActions}
            {primaryAction}
            {onClose ? (
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label="关闭"
                title="关闭"
                className="rounded-xl border border-white/10 bg-white/[0.03] text-white/80 hover:bg-white/[0.08] hover:text-white"
                onClick={onClose}
              >
                ×
              </Button>
            ) : null}
          </div>
        </header>

        <div className={cn("grid min-h-0 flex-1 grid-cols-1 xl:grid-cols-[minmax(0,1fr)_360px]", !sidebar && "xl:grid-cols-1")}>
          <div className="flex min-h-0 min-w-0 flex-col bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.08),_transparent_36%),linear-gradient(180deg,_rgba(255,255,255,0.02),_rgba(255,255,255,0.01))]">
            {scrollBody ? <ScrollArea className="min-h-0 flex-1">{children}</ScrollArea> : <div className="min-h-0 flex-1">{children}</div>}
          </div>

          {sidebar ? (
            <aside className="flex min-h-0 min-w-0 flex-col border-t border-white/8 bg-white/[0.02] xl:border-l xl:border-t-0">
              {scrollSidebar ? (
                <ScrollArea className="min-h-0 flex-1">{sidebar}</ScrollArea>
              ) : (
                <div className="min-h-0 flex-1">{sidebar}</div>
              )}
            </aside>
          ) : null}
        </div>
      </div>
    </section>
  );
}
