"use client";

import { useState } from "react";
import { Drawer } from "antd";
import { FolderOpenOutlined, LeftOutlined, NodeIndexOutlined } from "@ant-design/icons";

import { useI18n } from "@/i18n";
import { AssetLibraryPanel } from "./AssetLibraryDrawer";
import { CanvasOutlinePanel } from "./CanvasOutlineDrawer";

interface ResourceManagerDrawerProps {
  open: boolean;
  onClose: () => void;
}

type ResourceManagerTab = "canvas" | "assets";

export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerProps) {
  const { t } = useI18n();
  const [activeTab, setActiveTab] = useState<ResourceManagerTab>("canvas");

  const tabButtonClass = (tab: ResourceManagerTab) => [
    "flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-semibold transition-colors",
    activeTab === tab
      ? "bg-[var(--surface-active)] text-[var(--text-primary)]"
      : "bg-transparent text-[var(--text-muted)] hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)]",
  ].join(" ");

  return (
    <Drawer
      open={open}
      onClose={onClose}
      placement="left"
      mask={false}
      closable={false}
      zIndex={60}
      rootClassName="nodrag nopan nowheel w-[352px]"
      styles={{
        section: {
          overflow: "visible",
          borderRight: "1px solid var(--border-subtle)",
          borderRadius: "0 10px 10px 0",
          background: "var(--surface-1)",
          boxShadow: "none",
        },
        body: {
          padding: 0,
          overflow: "visible",
        },
      }}
    >
      <div className="flex h-full min-h-0 flex-col bg-[var(--surface-1)] text-[var(--text-primary)]">
        <div className="flex h-[52px] items-center gap-2 px-4 pt-3">
          <button
            type="button"
            onClick={onClose}
            aria-label={t("common.close")}
            className="flex h-7 w-7 items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)]"
          >
            <LeftOutlined />
          </button>
          <h2 className="min-w-0 flex-1 truncate text-[22px] font-semibold leading-7 text-[var(--text-primary)]">
            {t("resourceManager.title")}
          </h2>
        </div>

        <div className="px-4 pt-3">
          <div className="flex items-center gap-1">
            <button
              type="button"
              className={tabButtonClass("canvas")}
              onClick={() => setActiveTab("canvas")}
            >
              <NodeIndexOutlined className="text-[14px]" />
              <span>{t("resourceManager.tabCanvas")}</span>
            </button>
            <button
              type="button"
              className={tabButtonClass("assets")}
              onClick={() => setActiveTab("assets")}
            >
              <FolderOpenOutlined className="text-[14px]" />
              <span>{t("resourceManager.tabAssets")}</span>
            </button>
          </div>
        </div>

        <div className="min-h-0 flex-1 pt-3">
          {activeTab === "canvas" ? (
            <CanvasOutlinePanel className="px-4 pb-5" />
          ) : (
            <AssetLibraryPanel active={open && activeTab === "assets"} />
          )}
        </div>
      </div>
    </Drawer>
  );
}