import { ShieldCheck } from "lucide-react";
import type {
  AppMetricsProps,
  AppShellProps,
  AppSidebarProps,
  AppTopbarProps,
} from "./types";
import { useAppSidebarModel } from "./hooks/useAppSidebarModel";
import { useAppTopbarModel } from "./hooks/useAppTopbarModel";

export function AppSidebar({ activeView, items, onSelect }: AppSidebarProps) {
  const { navigationItems } = useAppSidebarModel({ items, onSelect });

  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">GA</div>
        <div>
          <div className="brand-title">Artifact Assistant</div>
          <div className="brand-subtitle">Scanner-first MVP</div>
        </div>
      </div>

      <nav className="nav-list">
        {navigationItems.map((item) => {
          const Icon = item.icon;
          return (
            <button
              key={item.id}
              className={`nav-item ${activeView === item.id ? "active" : ""}`}
              disabled={Boolean(item.disabled)}
              onClick={item.onSelect}
              title={item.disabled ? item.disabledReason : undefined}
            >
              <Icon size={18} />
              {item.label}
            </button>
          );
        })}
      </nav>

      <div className="safety-card">
        <ShieldCheck size={18} />
        <div>
          <strong>Sicherheits-Grenzen</strong>
          <span>Keine Eingriffe am Spielinventar, keine Ressourcen-Aktionen, nur Analyse und Scan.</span>
        </div>
      </div>
    </aside>
  );
}

export function AppTopbar({
  topbarStatus,
  canExportGood,
  canShowOverlay,
  isScanning,
  artifactCount,
  onShowOverlay,
  onDemoScan,
  onExportGood,
  exportIcon,
  overlayIcon,
  demoIcon,
}: AppTopbarProps) {
  const {
    handleShowOverlay,
    handleExportGood,
    handleDemoScan,
    isExportDisabled,
    isDemoDisabled,
    isOverlayDisabled,
    exportButtonLabel,
    exportButtonTitle,
    overlayButtonLabel,
    overlayButtonTitle,
    demoButtonLabel,
    demoButtonTitle,
  } = useAppTopbarModel({
    onExportGood,
    onShowOverlay,
    onDemoScan,
    canExportGood,
    canShowOverlay,
    isScanning,
    artifactCount,
  });

  return (
    <header className="topbar">
      <div>
        <p className="eyebrow">Lokaler Windows-Assistent</p>
        <h1>Scanne dein Inventar, triff einfache Artifact-Entscheidungen.</h1>
      </div>
      <div className="topbar-actions">
        {topbarStatus && <span className="topbar-status">{topbarStatus}</span>}
        <button className="ghost-button" onClick={handleExportGood} disabled={isExportDisabled} title={exportButtonTitle}>
          {exportIcon}
          <span>{exportButtonLabel}</span>
        </button>
        <button
          className="ghost-button"
          onClick={handleShowOverlay}
          disabled={isOverlayDisabled}
          title={overlayButtonTitle}
        >
          {overlayIcon}
          <span>{overlayButtonLabel}</span>
        </button>
        <button
          className="ghost-button"
          onClick={handleDemoScan}
          disabled={isDemoDisabled}
          title={demoButtonTitle}
        >
          {demoIcon}
          {demoButtonLabel}
        </button>
      </div>
    </header>
  );
}

export function AppMetrics({ metricCards }: AppMetricsProps) {
  return (
    <section className="metrics-grid">
      {metricCards.map((metric) => (
        <div className="metric" key={metric.label}>
          <span>{metric.label}</span>
          <strong>{metric.value}</strong>
          <small>{metric.detail}</small>
        </div>
      ))}
    </section>
  );
}

export function AppShell({ sidebar, children }: AppShellProps) {
  return (
    <div className="app-shell">
      {sidebar}
      <main className="main-panel">{children}</main>
    </div>
  );
}
