OpenFlare/frontend/app/(main)/apply-logs/components/log-detail-sheet.tsx

'use client';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import type { ApplyLogItem } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

interface LogDetailSheetProps {
  log: ApplyLogItem | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

function getResultBadge(result: string) {
  if (result === 'success') {
    return (
      <Badge
        variant='outline'
        className='text-[10px] bg-emerald-500/10 border-emerald-500/20 text-emerald-600 rounded-full py-0 px-2'
      >
        <span className='size-1 bg-emerald-500 rounded-full mr-1.5 shrink-0' />
        成功
      </Badge>
    );
  }
  if (result === 'warning') {
    return (
      <Badge
        variant='outline'
        className='text-[10px] bg-amber-500/10 border-amber-500/20 text-amber-600 rounded-full py-0 px-2'
      >
        <span className='size-1 bg-amber-500 rounded-full mr-1.5 shrink-0' />
        警告
      </Badge>
    );
  }
  return (
    <Badge
      variant='outline'
      className='text-[10px] bg-destructive/10 border-destructive/20 text-destructive rounded-full py-0 px-2'
    >
      <span className='size-1 bg-destructive rounded-full mr-1.5 shrink-0' />
      失败
    </Badge>
  );
}

export function LogDetailSheet({
  log,
  open,
  onOpenChange,
}: LogDetailSheetProps) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className='sm:max-w-md w-full p-0 flex flex-col gap-0'>
        <SheetHeader className='px-5 py-4 border-b'>
          <SheetTitle>应用日志详情</SheetTitle>
          <SheetDescription>
            查看单条应用日志的完整结果与校验信息。
          </SheetDescription>
        </SheetHeader>

        {log ? (
          <div className='flex-1 overflow-y-auto px-5 py-4 space-y-4'>
            <div className='flex flex-wrap gap-2'>
              {getResultBadge(log.result)}
              <Badge variant='outline' className='text-[10px] rounded-full'>
                Node: {log.node_id}
              </Badge>
              <Badge variant='outline' className='text-[10px] rounded-full'>
                版本: {log.version}
              </Badge>
            </div>

            <div className='grid gap-3 text-xs'>
              <div>
                <p className='text-muted-foreground'>创建时间</p>
                <p className='font-medium'>{formatDateTime(log.created_at)}</p>
              </div>
              <div>
                <p className='text-muted-foreground'>目标 Checksum</p>
                <p className='font-mono break-all'>{log.checksum || '—'}</p>
              </div>
              <div>
                <p className='text-muted-foreground'>主配置摘要</p>
                <p className='font-mono break-all'>
                  {log.main_config_checksum || '—'}
                </p>
              </div>
              <div>
                <p className='text-muted-foreground'>路由配置摘要</p>
                <p className='font-mono break-all'>
                  {log.route_config_checksum || '—'}
                </p>
              </div>
              <div>
                <p className='text-muted-foreground'>支持文件数</p>
                <p className='font-medium'>{log.support_file_count}</p>
              </div>
            </div>

            <div className='rounded-lg border border-dashed p-3'>
              <p className='text-[10px] uppercase tracking-wider text-muted-foreground mb-2'>
                消息
              </p>
              <pre className='text-xs whitespace-pre-wrap break-words'>
                {log.message || '—'}
              </pre>
            </div>
          </div>
        ) : null}

        <SheetFooter className='px-5 py-4 border-t'>
          <Button variant='outline' onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}