import { renderAppShell } from "../layout/app-shell.tsx";
import {
  renderAssetSummaryPanel,
  type ProbeSummary,
} from "./components/asset-summary-panel.tsx";

export type AssetDetailInput = {
  workspaceName: string;
  projectName: string;
  asset: {
    id: string;
    displayName: string;
    type: string;
    status: string;
    sourceType: string;
  };
  probeReport: ProbeSummary;
};

export function renderAssetDetailPage(input: AssetDetailInput): string {
  const content = `
    <section data-view="asset-detail-page">
      <div data-slot="file-tree">File Tree</div>
      <div data-slot="preview-surface">Preview Surface</div>
      <section data-slot="asset-metadata">
        <h1>${input.asset.displayName}</h1>
        <p>Asset ID: ${input.asset.id}</p>
        <p>Type: ${input.asset.type}</p>
        <p>Status: ${input.asset.status}</p>
        <p>Source: ${input.asset.sourceType}</p>
      </section>
      ${renderAssetSummaryPanel(input.probeReport)}
    </section>
  `;

  return renderAppShell({
    workspaceName: input.workspaceName,
    projectName: input.projectName,
    activeItem: "Assets",
    content,
  });
}