import { useState, useEffect } from 'react';
import { X, Folder, File, Search, ArrowLeft, Grid, List, FileCode } from 'lucide-react';
import { TauriAPI, DirectoryEntry } from '../api/tauri';
import '../styles/AssetPickerDialog.css';

interface AssetPickerDialogProps {
    projectPath: string;
    fileExtension: string;
    onSelect: (assetId: string) => void;
    onClose: () => void;
    locale: string;
    /** 资产基础路径（相对于项目根目录），用于计算 assetId */
    assetBasePath?: string;
}

interface AssetItem {
    name: string;
    path: string;
    isDir: boolean;
    extension?: string;
    size?: number;
    modified?: number;
}

type ViewMode = 'list' | 'grid';

export function AssetPickerDialog({ projectPath, fileExtension, onSelect, onClose, locale, assetBasePath }: AssetPickerDialogProps) {
    // 计算实际的资产目录路径
    const actualAssetPath = assetBasePath
        ? `${projectPath}/${assetBasePath}`.replace(/\\/g, '/').replace(/\/+/g, '/')
        : projectPath;

    const [currentPath, setCurrentPath] = useState(actualAssetPath);
    const [assets, setAssets] = useState<AssetItem[]>([]);
    const [selectedPath, setSelectedPath] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);
    const [searchQuery, setSearchQuery] = useState('');
    const [viewMode, setViewMode] = useState<ViewMode>('list');

    const translations = {
        en: {
            title: 'Select Asset',
            loading: 'Loading...',
            empty: 'No assets found',
            select: 'Select',
            cancel: 'Cancel',
            search: 'Search...',
            back: 'Back',
            listView: 'List View',
            gridView: 'Grid View'
        },
        zh: {
            title: '选择资产',
            loading: '加载中...',
            empty: '没有找到资产',
            select: '选择',
            cancel: '取消',
            search: '搜索...',
            back: '返回上级',
            listView: '列表视图',
            gridView: '网格视图'
        }
    };

    const t = translations[locale as keyof typeof translations] || translations.en;

    useEffect(() => {
        loadAssets(currentPath);
    }, [currentPath]);

    const loadAssets = async (path: string) => {
        setLoading(true);
        try {
            const entries = await TauriAPI.listDirectory(path);
            const assetItems: AssetItem[] = entries
                .map((entry: DirectoryEntry) => {
                    const extension = entry.is_dir ? undefined :
                        (entry.name.includes('.') ? entry.name.split('.').pop() : undefined);

                    return {
                        name: entry.name,
                        path: entry.path,
                        isDir: entry.is_dir,
                        extension,
                        size: entry.size,
                        modified: entry.modified
                    };
                })
                .filter(item => item.isDir || item.extension === fileExtension)
                .sort((a, b) => {
                    if (a.isDir === b.isDir) return a.name.localeCompare(b.name);
                    return a.isDir ? -1 : 1;
                });

            setAssets(assetItems);
        } catch (error) {
            console.error('Failed to load assets:', error);
            setAssets([]);
        } finally {
            setLoading(false);
        }
    };

    // 过滤搜索结果
    const filteredAssets = assets.filter(item =>
        item.name.toLowerCase().includes(searchQuery.toLowerCase())
    );

    // 格式化文件大小
    const formatFileSize = (bytes?: number): string => {
        if (!bytes) return '';
        if (bytes < 1024) return `${bytes} B`;
        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    };

    // 格式化修改时间
    const formatDate = (timestamp?: number): string => {
        if (!timestamp) return '';
        const date = new Date(timestamp * 1000);
        return date.toLocaleDateString(locale === 'zh' ? 'zh-CN' : 'en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });
    };

    // 返回上级目录
    const handleGoBack = () => {
        const parentPath = currentPath.split(/[/\\]/).slice(0, -1).join('/');
        const minPath = actualAssetPath.replace(/[/\\]$/, '');
        if (parentPath && parentPath !== minPath) {
            setCurrentPath(parentPath);
        } else if (currentPath !== actualAssetPath) {
            setCurrentPath(actualAssetPath);
        }
    };

    // 只能返回到资产基础目录，不能再往上
    const canGoBack = currentPath !== actualAssetPath;

    const handleItemClick = (item: AssetItem) => {
        if (item.isDir) {
            setCurrentPath(item.path);
        } else {
            setSelectedPath(item.path);
        }
    };

    const handleItemDoubleClick = (item: AssetItem) => {
        if (!item.isDir) {
            const assetId = calculateAssetId(item.path);
            onSelect(assetId);
        }
    };

    const handleSelect = () => {
        if (selectedPath) {
            const assetId = calculateAssetId(selectedPath);
            onSelect(assetId);
        }
    };

    /**
     * 计算资产ID
     * 将绝对路径转换为相对于资产基础目录的assetId（不含扩展名）
     */
    const calculateAssetId = (absolutePath: string): string => {
        const normalized = absolutePath.replace(/\\/g, '/');
        const baseNormalized = actualAssetPath.replace(/\\/g, '/');

        // 获取相对于资产基础目录的路径
        let relativePath = normalized;
        if (normalized.startsWith(baseNormalized)) {
            relativePath = normalized.substring(baseNormalized.length);
        }

        // 移除开头的斜杠
        relativePath = relativePath.replace(/^\/+/, '');

        // 移除文件扩展名
        const assetId = relativePath.replace(new RegExp(`\\.${fileExtension}$`), '');

        return assetId;
    };

    const getBreadcrumbs = () => {
        const basePathNormalized = actualAssetPath.replace(/\\/g, '/');
        const currentPathNormalized = currentPath.replace(/\\/g, '/');

        const relative = currentPathNormalized.replace(basePathNormalized, '');
        const parts = relative.split('/').filter(p => p);

        // 根路径名称（显示"行为树"或"Assets"）
        const rootName = assetBasePath
            ? assetBasePath.split('/').pop() || 'Assets'
            : 'Content';

        const crumbs = [{ name: rootName, path: actualAssetPath }];
        let accPath = actualAssetPath;

        for (const part of parts) {
            accPath = `${accPath}/${part}`;
            crumbs.push({ name: part, path: accPath });
        }

        return crumbs;
    };

    const breadcrumbs = getBreadcrumbs();

    return (
        <div className="asset-picker-overlay" onClick={onClose}>
            <div className="asset-picker-dialog" onClick={(e) => e.stopPropagation()}>
                <div className="asset-picker-header">
                    <h3>{t.title}</h3>
                    <button className="asset-picker-close" onClick={onClose}>
                        <X size={18} />
                    </button>
                </div>

                <div className="asset-picker-toolbar">
                    <button
                        className="toolbar-button"
                        onClick={handleGoBack}
                        disabled={!canGoBack}
                        title={t.back}
                    >
                        <ArrowLeft size={16} />
                    </button>

                    <div className="asset-picker-breadcrumb">
                        {breadcrumbs.map((crumb, index) => (
                            <span key={crumb.path}>
                                <span
                                    className="breadcrumb-item"
                                    onClick={() => setCurrentPath(crumb.path)}
                                >
                                    {crumb.name}
                                </span>
                                {index < breadcrumbs.length - 1 && <span className="breadcrumb-separator"> / </span>}
                            </span>
                        ))}
                    </div>

                    <div className="view-mode-buttons">
                        <button
                            className={`toolbar-button ${viewMode === 'list' ? 'active' : ''}`}
                            onClick={() => setViewMode('list')}
                            title={t.listView}
                        >
                            <List size={16} />
                        </button>
                        <button
                            className={`toolbar-button ${viewMode === 'grid' ? 'active' : ''}`}
                            onClick={() => setViewMode('grid')}
                            title={t.gridView}
                        >
                            <Grid size={16} />
                        </button>
                    </div>
                </div>

                <div className="asset-picker-search">
                    <Search size={16} className="search-icon" />
                    <input
                        type="text"
                        placeholder={t.search}
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="search-input"
                    />
                    {searchQuery && (
                        <button
                            className="search-clear"
                            onClick={() => setSearchQuery('')}
                        >
                            <X size={14} />
                        </button>
                    )}
                </div>

                <div className="asset-picker-content">
                    {loading ? (
                        <div className="asset-picker-loading">{t.loading}</div>
                    ) : filteredAssets.length === 0 ? (
                        <div className="asset-picker-empty">{t.empty}</div>
                    ) : (
                        <div className={`asset-picker-list ${viewMode}`}>
                            {filteredAssets.map((item, index) => (
                                <div
                                    key={index}
                                    className={`asset-picker-item ${selectedPath === item.path ? 'selected' : ''}`}
                                    onClick={() => handleItemClick(item)}
                                    onDoubleClick={() => handleItemDoubleClick(item)}
                                >
                                    <div className="asset-icon">
                                        {item.isDir ? (
                                            <Folder size={viewMode === 'grid' ? 32 : 18} style={{ color: '#ffa726' }} />
                                        ) : (
                                            <FileCode size={viewMode === 'grid' ? 32 : 18} style={{ color: '#66bb6a' }} />
                                        )}
                                    </div>
                                    <div className="asset-info">
                                        <span className="asset-name">{item.name}</span>
                                        {viewMode === 'list' && !item.isDir && (
                                            <div className="asset-meta">
                                                {item.size && <span className="asset-size">{formatFileSize(item.size)}</span>}
                                                {item.modified && <span className="asset-date">{formatDate(item.modified)}</span>}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                <div className="asset-picker-footer">
                    <div className="footer-info">
                        {filteredAssets.length} {locale === 'zh' ? '项' : 'items'}
                    </div>
                    <div className="footer-buttons">
                        <button className="asset-picker-cancel" onClick={onClose}>
                            {t.cancel}
                        </button>
                        <button
                            className="asset-picker-select"
                            onClick={handleSelect}
                            disabled={!selectedPath}
                        >
                            {t.select}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}