OpenFlare/frontend/app/(main)/config-versions/components/version-snapshot-sheet.tsx

'use client';

import { useEffect, useState } from 'react';
import { Loader2 } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { toast } from 'sonner';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { CodeBlock } from '@/components/ui/code-block';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import {
  type ConfigVersionDetail,
  ConfigVersionService,
  type ConfigVersionSummary,
} from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

interface VersionSnapshotSheetProps {
  version: ConfigVersionSummary | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function VersionSnapshotSheet({
  version,
  open,
  onOpenChange,
}: VersionSnapshotSheetProps) {
  const t = useTranslations('configVersions');
  const [detail, setDetail] = useState<ConfigVersionDetail | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!open || !version) {
      setDetail(null);
      return;
    }

    let cancelled = false;
    setLoading(true);

    ConfigVersionService.getById(version.id)
      .then((data) => {
        if (!cancelled) setDetail(data);
      })
      .catch((err) => {
        if (!cancelled) {
          toast.error(t('snapshotLoadFailed'), {
            description:
              err instanceof Error ? err.message : t('unknownError'),
          });
        }
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [open, version, t]);

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className='sm:max-w-2xl w-full p-0 flex h-svh flex-col gap-0'>
        <SheetHeader className='px-5 py-4 border-b'>
          <SheetTitle>
            {version
              ? t('snapshotVersion', { version: version.version })
              : t('snapshotTitle')}
          </SheetTitle>
          <SheetDescription>{t('snapshotDesc')}</SheetDescription>
        </SheetHeader>

        <div className='flex-1 min-h-0 overflow-y-auto px-5 py-4'>
          {loading ? (
            <div className='flex items-center justify-center gap-2 py-16 text-sm text-muted-foreground'>
              <Loader2 className='size-4 animate-spin' />
              {t('loadingSnapshot')}
            </div>
          ) : detail ? (
            <div className='space-y-5 pb-4'>
              <div className='flex flex-wrap gap-2'>
                {detail.is_active ? (
                  <Badge className='rounded-full text-[10px]'>
                    {t('active')}
                  </Badge>
                ) : (
                  <Badge variant='outline' className='rounded-full text-[10px]'>
                    {t('history')}
                  </Badge>
                )}
                <Badge
                  variant='outline'
                  className='rounded-full text-[10px] font-mono'
                >
                  {detail.checksum}
                </Badge>
              </div>

              <div className='grid gap-3 sm:grid-cols-2 text-xs'>
                <div>
                  <p className='text-muted-foreground'>{t('createdBy')}</p>
                  <p className='font-medium'>
                    {detail.created_by || t('system')}
                  </p>
                </div>
                <div>
                  <p className='text-muted-foreground'>{t('createdAt')}</p>
                  <p className='font-medium'>
                    {formatDateTime(detail.created_at)}
                  </p>
                </div>
              </div>

              <div className='space-y-2'>
                <p className='text-xs font-semibold'>{t('mainConfig')}</p>
                <CodeBlock
                  code={detail.main_config}
                  language='nginx'
                  className='my-0 text-xs'
                />
              </div>

              <div className='space-y-2'>
                <p className='text-xs font-semibold'>{t('routeConfig')}</p>
                <CodeBlock
                  code={detail.rendered_config}
                  language='nginx'
                  className='my-0 text-xs'
                />
              </div>
            </div>
          ) : null}
        </div>

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