beaver_project/app-instance/frontend/components/skills/SkillDetailView.tsx

'use client';

import React from 'react';
import { FileText, GitBranch, Loader2 } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { SkillFileContent, SkillFileInfo, SkillVersionRef } from '@/types';

type SkillDetailViewProps = {
  title: string;
  summary?: string | null;
  badges?: React.ReactNode;
  actions?: React.ReactNode;
  currentVersion: string;
  versions: SkillVersionRef[];
  files: SkillFileInfo[];
  content: string;
  selectedFile?: SkillFileContent | null;
  loadingFile?: boolean;
  loadingVersion?: boolean;
  onSelectVersion: (version: string) => void;
  onOpenFile: (filePath: string) => void;
  labels: {
    overview: string;
    files: string;
    versions: string;
    noReadme: string;
    noFiles: string;
    selectFile: string;
    binaryFile: string;
    current: string;
    size: string;
  };
};

export function SkillDetailView({
  title,
  summary,
  badges,
  actions,
  currentVersion,
  versions,
  files,
  content,
  selectedFile,
  loadingFile,
  loadingVersion,
  onSelectVersion,
  onOpenFile,
  labels,
}: SkillDetailViewProps) {
  const readme = stripFrontmatter(content || '');
  return (
    <div className="min-w-0 rounded-lg border border-border bg-white text-black [--background:0_0%_100%] [--card:0_0%_100%] [--card-foreground:0_0%_0%] [--foreground:0_0%_0%] [--muted-foreground:0_0%_0%] [--popover:0_0%_100%] [--popover-foreground:0_0%_0%] [--secondary-foreground:0_0%_0%]">
      <div className="border-b border-border p-4 sm:p-5">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0 flex-1">
            <div className="mb-2 flex flex-wrap items-center gap-2">
              {badges}
              <Badge variant="outline">v{currentVersion || '-'}</Badge>
              {loadingVersion && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
            </div>
            <h2 className="break-words text-2xl font-semibold tracking-normal">{title}</h2>
            {summary && <p className="mt-2 max-w-4xl break-words text-sm leading-6 text-muted-foreground">{summary}</p>}
          </div>
          {actions}
        </div>
      </div>

      <Tabs defaultValue="overview" className="p-4 sm:p-5">
        <TabsList className="h-auto min-h-11 flex-wrap">
          <TabsTrigger value="overview" className="min-h-11">{labels.overview}</TabsTrigger>
          <TabsTrigger value="files" className="min-h-11">{labels.files}</TabsTrigger>
          <TabsTrigger value="versions" className="min-h-11">{labels.versions}</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-5">
          {readme.trim() ? (
            <MarkdownPreview content={readme} />
          ) : (
            <EmptyPanel icon={<FileText className="h-7 w-7" />} text={labels.noReadme} />
          )}
        </TabsContent>

        <TabsContent value="files" className="mt-5">
          <div className="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,320px)_minmax(0,1fr)]">
            <div className="min-h-[420px] rounded-lg border border-border">
              {files.length === 0 ? (
                <EmptyPanel icon={<FileText className="h-7 w-7" />} text={labels.noFiles} />
              ) : (
                <div className="max-h-[620px] overflow-auto p-2">
                  {files.map((file) => (
                    <button
                      key={file.filePath}
                      type="button"
                      className={`flex min-h-11 w-full items-center justify-between gap-3 rounded-md px-3 py-3 text-left text-sm transition hover:bg-muted ${
                        selectedFile?.filePath === file.filePath ? 'bg-muted' : ''
                      }`}
                      onClick={() => onOpenFile(file.filePath)}
                    >
                      <span className="min-w-0 break-all font-mono text-xs">{file.filePath}</span>
                      <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(file.fileSize)}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>

            <div className="min-w-0 rounded-lg border border-border bg-muted/20 p-4 lg:min-h-[420px]">
              {loadingFile ? (
                <div className="flex h-[360px] items-center justify-center">
                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                </div>
              ) : selectedFile ? (
                <FilePreview file={selectedFile} labels={labels} />
              ) : (
                <EmptyPanel icon={<FileText className="h-7 w-7" />} text={labels.selectFile} />
              )}
            </div>
          </div>
        </TabsContent>

        <TabsContent value="versions" className="mt-5">
          <div className="space-y-2">
            {versions.map((version) => (
              <button
                key={version.version}
                type="button"
                className={`flex min-h-11 w-full flex-col gap-3 rounded-lg border px-4 py-3 text-left transition hover:bg-muted sm:flex-row sm:items-center sm:justify-between sm:gap-4 ${
                  version.version === currentVersion ? 'border-primary bg-muted' : 'border-border'
                }`}
                onClick={() => onSelectVersion(version.version)}
              >
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <GitBranch className="h-4 w-4 text-muted-foreground" />
                    <span className="break-all font-mono text-sm">{version.version}</span>
                    {version.version === currentVersion && <Badge variant="secondary">{labels.current}</Badge>}
                    {version.status && <Badge variant="outline">{version.status}</Badge>}
                  </div>
                  {version.changeReason && (
                    <p className="mt-1 break-words text-xs text-muted-foreground">{version.changeReason}</p>
                  )}
                </div>
                <div className="shrink-0 text-left text-xs text-muted-foreground sm:text-right">
                  {version.publishedAt || version.createdAt || ''}
                  {typeof version.totalSize === 'number' && (
                    <div>
                      {labels.size}: {formatBytes(version.totalSize)}
                    </div>
                  )}
                </div>
              </button>
            ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

function FilePreview({ file, labels }: { file: SkillFileContent; labels: SkillDetailViewProps['labels'] }) {
  const content = file.content || '';
  return (
    <div className="min-w-0 space-y-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="break-all font-mono text-sm font-medium">{file.filePath}</div>
        <Badge variant="outline">
          {labels.size}: {formatBytes(file.fileSize)}
        </Badge>
      </div>
      {file.isBinary ? (
        <EmptyPanel icon={<FileText className="h-7 w-7" />} text={labels.binaryFile} />
      ) : isMarkdown(file.filePath, file.contentType) ? (
        <MarkdownPreview content={stripFrontmatter(content)} />
      ) : (
        <pre className="max-h-[560px] max-w-full overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-background p-4 text-xs leading-5">
          {content}
        </pre>
      )}
    </div>
  );
}

function MarkdownPreview({ content }: { content: string }) {
  return (
    <div className="prose prose-sm max-w-none break-words text-black prose-a:text-black prose-blockquote:text-black prose-code:break-words prose-code:rounded prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:text-black prose-headings:text-black prose-headings:tracking-normal prose-li:text-black prose-p:text-black prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:border prose-pre:border-border prose-pre:bg-muted prose-pre:text-black prose-strong:text-black prose-table:block prose-table:overflow-x-auto prose-table:text-black prose-td:text-black prose-th:text-black [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
    </div>
  );
}

function EmptyPanel({ icon, text }: { icon: React.ReactNode; text: string }) {
  return (
    <div className="flex min-h-[220px] flex-col items-center justify-center text-center text-muted-foreground">
      <div className="mb-3 opacity-40">{icon}</div>
      <p className="text-sm font-medium">{text}</p>
    </div>
  );
}

function stripFrontmatter(value: string): string {
  if (!value.startsWith('---')) return value;
  const marker = value.indexOf('\n---', 3);
  if (marker < 0) return value;
  const after = value.indexOf('\n', marker + 4);
  return after >= 0 ? value.slice(after + 1) : '';
}

function isMarkdown(filePath: string, contentType?: string | null): boolean {
  return filePath.toLowerCase().endsWith('.md') || (contentType || '').includes('markdown');
}

function formatBytes(value: number | undefined): string {
  const size = Number(value || 0);
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
  return `${(size / 1024 / 1024).toFixed(1)} MB`;
}