"use client";

import Link from "next/link";
import { ArrowLeft, Database, RefreshCw } from "lucide-react";

export function AppShell({
  children,
  title = "运营流程账本",
  titleExtra,
  subtitle,
  runId,
  showBack,
  backHref,
  onRefresh,
  actions
}: {
  children: React.ReactNode;
  title?: string;
  titleExtra?: React.ReactNode;
  subtitle?: string;
  runId?: string;
  showBack?: boolean;
  backHref?: string;
  onRefresh?: () => void;
  actions?: React.ReactNode;
}) {
  const resolvedBackHref = backHref || (runId ? `/runs/${encodeURIComponent(runId)}` : "/runs");

  return (
    <main className="app-shell">
      <div className="scroll-area">
        <header className="page-header">
          <div className="header-left">
            {showBack ? (
              <Link className="toolbar-button" href={resolvedBackHref}>
                <ArrowLeft size={15} />
                返回
              </Link>
            ) : null}
            <Link className="brand" href="/runs">
              <Database size={16} />
              <span>{title}</span>
            </Link>
            {titleExtra}
            {subtitle ? <span className="header-subtitle">{subtitle}</span> : null}
          </div>
          <div className="toolbar">
            {actions}
            {onRefresh ? (
              <button className="icon-button" type="button" title="刷新" aria-label="刷新" onClick={onRefresh}>
                <RefreshCw size={15} />
              </button>
            ) : null}
          </div>
        </header>
        {children}
      </div>
    </main>
  );
}