import { useEffect, useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  FolderOpen,
  FileText,
  Download,
  ChevronRight,
  Home,
  ArrowLeft,
  X,
  Maximize2,
  Minimize2,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { pipelineApi } from '@/api';
import { useUserStore } from '@/store';
import { useTranslation } from 'react-i18next';

interface FileItem {
  name: string;
  path: string;
  is_dir: boolean;
  size: number;
  mod_time: string;
}

interface ListingData {
  current: string;
  dirs: FileItem[];
  files: FileItem[];
}

interface FileBrowserDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  runId: number | null;
  buildNumber: number;
}

function formatSize(bytes: number): string {
  if (bytes === 0) return '-';
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

/**
 * 工作区文件浏览器 — 浏览/下载流水线构建目录文件
 */
export function FileBrowserDialog({
  open,
  onOpenChange,
  runId,
  buildNumber,
}: FileBrowserDialogProps) {
  const { t } = useTranslation();
  const [listing, setListing] = useState<ListingData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [currentPath, setCurrentPath] = useState('');
  const [fullscreen, setFullscreen] = useState(false);

  // 加载目录
  const loadDir = async (path: string) => {
    if (!runId) return;
    setLoading(true);
    setError('');
    try {
      const data = await pipelineApi.listRunFiles(runId, path || undefined);
      setListing(data);
      setCurrentPath(data?.current || '');
    } catch (err) {
      setError(err?.message || t('common.loadFailed'));
      setListing(null);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (open && runId) {
      setCurrentPath('');
      loadDir('');
    }
  }, [open, runId]);

  // 下载文件
  const downloadFile = async (file: FileItem) => {
    const token = useUserStore.getState().token || '';
    const url = `${location.protocol}//${location.host}/api/v1/pipelines/runs/${runId}/files/download?path=${encodeURIComponent(file.path)}&token=${encodeURIComponent(token)}`;
    window.open(url, '_blank');
  };

  // 面包屑导航
  const parts = currentPath ? currentPath.split('/').filter(Boolean) : [];
  const breadcrumbs = [''].concat(
    parts.map((_, i) => '/' + parts.slice(0, i + 1).join('/'))
  );

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        showCloseButton={false}
        className={cn(
          'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0 gap-0',
          '!duration-0 !transition-none',
          fullscreen
            ? '!max-w-none !w-screen !h-screen !rounded-none'
            : ''
        )}
        style={fullscreen ? { maxWidth: '100vw', width: '100vw', height: '100vh' } : { maxWidth: '700px', width: '85vw' }}
      >
        <DialogTitle className="sr-only">文件浏览器 #{buildNumber}</DialogTitle>
        <DialogDescription className="sr-only">{t('deploy.pipeline.buildDirFiles')}</DialogDescription>

        {/* Header */}
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--dg-border)] shrink-0">
          <div className="flex items-center gap-2 min-w-0">
            <FolderOpen className="h-4 w-4 text-[var(--dg-text-secondary)] shrink-0" />
            <span className="text-[var(--dg-text-primary)] font-medium text-sm">
              #{buildNumber} 工作区文件
            </span>
          </div>
          <div className="flex items-center gap-1">
            <button
              onClick={() => setFullscreen(!fullscreen)}
              className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
            >
              {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
            </button>
            <button
              onClick={() => onOpenChange(false)}
              className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)]"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        </div>

        {/* Breadcrumb */}
        <div className="flex items-center gap-0.5 px-4 py-2 text-xs border-b border-[var(--dg-border)] bg-[var(--dg-bg-primary)] overflow-x-auto shrink-0">
          {breadcrumbs.map((path, i) => (
            <span key={path} className="flex items-center gap-0.5">
              {i === 0 ? (
                <button
                  onClick={() => loadDir('')}
                  className="text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] p-0.5"
                >
                  <Home className="h-3.5 w-3.5" />
                </button>
              ) : (
                <>
                  <ChevronRight className="h-3 w-3 text-[var(--dg-text-muted)] shrink-0" />
                  <button
                    onClick={() => loadDir(path)}
                    className="text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] truncate max-w-[120px]"
                  >
                    {parts[i - 1]}
                  </button>
                </>
              )}
            </span>
          ))}
        </div>

        {/* Content */}
        <div className="overflow-y-auto" style={{ height: fullscreen ? 'calc(100vh - 110px)' : '420px' }}>
          {loading && (
            <div className="flex items-center justify-center h-full text-[var(--dg-text-muted)] text-sm">
              加载中...
            </div>
          )}

          {error && (
            <div className="flex items-center justify-center h-full dg-text-red text-sm">
              {error}
            </div>
          )}

          {listing && !loading && (
            <table className="w-full text-sm">
              <thead className="sticky top-0 bg-[var(--dg-bg-primary)] border-b border-[var(--dg-border)]">
                <tr className="text-left text-[var(--dg-text-muted)] text-xs">
                  <th className="py-2 pl-4 pr-2 font-medium">{t('common.name')}</th>
                  <th className="py-2 px-2 font-medium w-24 text-right">{t('deploy.table.size')}</th>
                  <th className="py-2 pr-4 pl-2 font-medium w-40 hidden sm:table-cell">{t('deploy.table.modifyTime')}</th>
                  <th className="py-2 pr-4 pl-2 font-medium w-16" />
                </tr>
              </thead>
              <tbody>
                {/* Parent dir */}
                {currentPath && (
                  <tr
                    className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer"
                    onClick={() => {
                      const parent = currentPath.split('/').slice(0, -1).join('/');
                      loadDir(parent);
                    }}
                  >
                    <td className="py-2 pl-4 pr-2 flex items-center gap-2">
                      <ArrowLeft className="h-4 w-4 text-[var(--dg-text-secondary)]" />
                      <span className="text-[var(--dg-text-secondary)]">..</span>
                    </td>
                    <td className="py-2 px-2 text-right" />
                    <td className="py-2 pr-4 pl-2 hidden sm:table-cell" />
                    <td className="py-2 pr-4 pl-2" />
                  </tr>
                )}

                {/* Directories */}
                {listing.dirs?.map((dir) => (
                  <tr
                    key={dir.path}
                    className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] cursor-pointer"
                    onClick={() => loadDir(dir.path)}
                  >
                    <td className="py-2 pl-4 pr-2 flex items-center gap-2">
                      <FolderOpen className="h-4 w-4 dg-text-yellow shrink-0" />
                      <span className="text-[var(--dg-text-primary)]">{dir.name}</span>
                    </td>
                    <td className="py-2 px-2 text-right text-[var(--dg-text-muted)]">-</td>
                    <td className="py-2 pr-4 pl-2 text-[var(--dg-text-muted)] hidden sm:table-cell">{dir.mod_time}</td>
                    <td className="py-2 pr-4 pl-2" />
                  </tr>
                ))}

                {/* Files */}
                {listing.files?.map((file) => (
                  <tr
                    key={file.path}
                    className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]"
                  >
                    <td className="py-2 pl-4 pr-2 flex items-center gap-2">
                      <FileText className="h-4 w-4 text-sky-400 shrink-0" />
                      <span className="text-[var(--dg-text-primary)]">{file.name}</span>
                    </td>
                    <td className="py-2 px-2 text-right text-[var(--dg-text-muted)]">{formatSize(file.size)}</td>
                    <td className="py-2 pr-4 pl-2 text-[var(--dg-text-muted)] hidden sm:table-cell">{file.mod_time}</td>
                    <td className="py-2 pr-4 pl-2">
                      <button
                        onClick={(e) => { e.stopPropagation(); downloadFile(file); }}
                        className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] hover:text-white"
                        title=t('common.download')
                      >
                        <Download className="h-3.5 w-3.5" />
                      </button>
                    </td>
                  </tr>
                ))}

                {/* Empty */}
                {listing.dirs?.length === 0 && listing.files?.length === 0 && !currentPath && (
                  <tr>
                    <td colSpan={4} className="py-8 text-center text-[var(--dg-text-muted)]">
                      {loading ? t('common.loading') : t('deploy.label.emptyDir')}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}