import { useEffect, useMemo, useState } from "react"
import type { ReactNode } from "react"
import type { WorkspaceSummary } from "@qjclaw/shared-types"
import { Panel } from "../../components/ui/Panel"
import { ScrollArea } from "../../components/ui/ScrollArea"
import { Tabs } from "../../components/ui/Tabs"

type Plugin = WorkspaceSummary["plugins"][number]

interface PluginsViewProps {
  pluginCards: Array<{ plugin: Plugin; sectionTitle: string }>
  noPluginsLabel: string
  getPluginCopy(plugin: Plugin): { name: string; description: string }
  getPluginTone(status: Plugin["status"]): "positive" | "warning" | "info"
  getPluginStatusLabel(status: Plugin["status"]): string
  renderStatusChip(tone: "positive" | "warning" | "info", label: string): ReactNode
  renderPluginIcon(): ReactNode
}

export function PluginsView({
  pluginCards,
  noPluginsLabel,
  getPluginCopy,
  getPluginTone,
  getPluginStatusLabel,
  renderStatusChip,
  renderPluginIcon
}: PluginsViewProps) {
  const pluginGroupTabs = useMemo(() => {
    const sectionTitles = Array.from(new Set(pluginCards.map((card) => card.sectionTitle)))
    return [
      { id: "all", label: "\u5168\u90e8" },
      ...sectionTitles.map((title) => ({ id: title, label: title }))
    ]
  }, [pluginCards])
  const [activePluginGroup, setActivePluginGroup] = useState("all")
  useEffect(() => {
    if (!pluginGroupTabs.some((tab) => tab.id === activePluginGroup)) {
      setActivePluginGroup("all")
    }
  }, [activePluginGroup, pluginGroupTabs])
  const visiblePluginCards = activePluginGroup === "all"
    ? pluginCards
    : pluginCards.filter((card) => card.sectionTitle === activePluginGroup)

  return (
    <div className="page-stack plugin-page-stack">
      <Panel className="plugin-page" bodyClassName="plugin-page-body">
        {pluginGroupTabs.length > 2 ? (
          <div className="plugin-tabs-row">
            <Tabs
              items={pluginGroupTabs}
              value={activePluginGroup}
              onValueChange={setActivePluginGroup}
              ariaLabel="\u63d2\u4ef6\u5206\u7ec4"
            />
          </div>
        ) : null}
        <ScrollArea className="scroll-panel plugin-section-list plugin-flat-list">
          <div className="plugin-grid plugin-flat-grid">
            {visiblePluginCards.map(({ plugin, sectionTitle }) => {
              const copy = getPluginCopy(plugin)
              return (
                <article key={plugin.id} className="catalog-item static plugin-card plugin-flat-card">
                  <div className="plugin-card-glow" aria-hidden="true" />
                  <div className="plugin-card-claw" aria-hidden="true">
                    {renderPluginIcon()}
                  </div>
                  <div className="plugin-card-meta">
                    <span className="plugin-card-group">{sectionTitle}</span>
                    {renderStatusChip(getPluginTone(plugin.status), getPluginStatusLabel(plugin.status))}
                  </div>
                  <div className="plugin-card-head">
                    <strong>{copy.name}</strong>
                  </div>
                  <p>{copy.description}</p>
                </article>
              )
            })}
          </div>
          {!visiblePluginCards.length ? <div className="empty-state">{noPluginsLabel}</div> : null}
        </ScrollArea>
      </Panel>
    </div>
  )
}
