import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import { Badge } from "@/Components/ui/badge";
import { ScrollArea } from "@/Components/ui/scroll-area";
import { User, Clock, Package, Activity as ActivityIcon } from "lucide-react";

interface Activity {
    id: number;
    description: string;
    subject_type: string;
    event: string;
    causer: string;
    created_at: string;
    properties: {
        attributes?: Record<string, any>;
        old?: Record<string, any>;
    };
}

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    activity: Activity | null;
}

// Field translation map
const fieldLabels: Record<string, string> = {
    name: '名稱',
    code: '代碼',
    description: '描述',
    price: '價格',
    cost: '成本',
    stock: '庫存',
    category_id: '分類',
    unit_id: '單位',
    is_active: '啟用狀態',
    conversion_rate: '換算率',
    specification: '規格',
    brand: '品牌',
    base_unit_id: '基本單位',
    large_unit_id: '大單位',
    purchase_unit_id: '採購單位',
    email: 'Email',
    password: '密碼',
    phone: '電話',
    address: '地址',
    role_id: '角色',
    // Snapshot fields
    category_name: '分類名稱',
    base_unit_name: '基本單位名稱',
    large_unit_name: '大單位名稱',
    purchase_unit_name: '採購單位名稱',
    // Warehouse & Inventory fields
    warehouse_name: '倉庫名稱',
    product_name: '商品名稱',
    warehouse_id: '倉庫',
    product_id: '商品',
    quantity: '數量',
    safety_stock: '安全庫存',
    location: '儲位',
};

export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
    if (!activity) return null;

    const attributes = activity.properties?.attributes || {};
    const old = activity.properties?.old || {};

    // Get all keys from both attributes and old to ensure we show all changes
    const allKeys = Array.from(new Set([...Object.keys(attributes), ...Object.keys(old)]));

    // Filter out internal keys often logged but not useful for users
    const filteredKeys = allKeys.filter(key =>
        !['created_at', 'updated_at', 'deleted_at', 'id'].includes(key)
    );

    const getEventBadgeClass = (event: string) => {
        switch (event) {
            case 'created': return 'bg-green-100 text-green-700 hover:bg-green-200 border-green-200';
            case 'updated': return 'bg-blue-100 text-blue-700 hover:bg-blue-200 border-blue-200';
            case 'deleted': return 'bg-red-100 text-red-700 hover:bg-red-200 border-red-200';
            default: return 'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-200';
        }
    };

    const getEventLabel = (event: string) => {
        switch (event) {
            case 'created': return '新增';
            case 'updated': return '更新';
            case 'deleted': return '刪除';
            default: return event;
        }
    };

    const formatValue = (key: string, value: any) => {
        if (value === null || value === undefined) return <span className="text-gray-400">-</span>;

        // Special handling for boolean values based on key
        if (typeof value === 'boolean') {
            if (key === 'is_active') return value ? '啟用' : '停用';
            return value ? '是' : '否';
        }

        if (typeof value === 'object') return JSON.stringify(value);
        return String(value);
    };

    const getFieldName = (key: string) => {
        return fieldLabels[key] || key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
    };

    // Helper to check if a key is a snapshot name field
    const isSnapshotField = (key: string) => {
        return ['category_name', 'base_unit_name', 'large_unit_name', 'purchase_unit_name', 'warehouse_name', 'product_name'].includes(key);
    };

    // Helper to get formatted value (merging ID and Name if available)
    const getFormattedValue = (key: string, value: any, allData: Record<string, any>) => {
        // If it's an ID field, check if we have a corresponding name snapshot
        if (key.endsWith('_id')) {
            const nameKey = key.replace('_id', '_name');
            const nameValue = allData[nameKey];
            if (nameValue) {
                return `${nameValue}`;
            }
        }
        return formatValue(key, value);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-2xl">
                <DialogHeader className="border-b pb-4">
                    <DialogTitle className="flex items-center gap-3">
                        <span className="text-xl font-bold text-gray-900">操作詳情</span>
                        <Badge variant="outline" className={`text-sm px-3 py-1 ${getEventBadgeClass(activity.event)}`}>
                            {getEventLabel(activity.event)}
                        </Badge>
                    </DialogTitle>

                    {/* Modern Metadata Strip */}
                    <div className="flex flex-wrap items-center gap-6 pt-4 text-sm text-gray-500">
                        <div className="flex items-center gap-2">
                            <User className="w-4 h-4 text-gray-400" />
                            <span className="font-medium text-gray-700">{activity.causer}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <Clock className="w-4 h-4 text-gray-400" />
                            <span>{activity.created_at}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <Package className="w-4 h-4 text-gray-400" />
                            <span>{activity.subject_type}</span>
                        </div>
                        {/* Only show 'description' if it differs from event name (unlikely but safe) */}
                        {activity.description !== getEventLabel(activity.event) &&
                            activity.description !== 'created' && activity.description !== 'updated' && (
                                <div className="flex items-center gap-2">
                                    <ActivityIcon className="w-4 h-4 text-gray-400" />
                                    <span>{activity.description}</span>
                                </div>
                            )}
                    </div>
                </DialogHeader>

                <div className="py-4">
                    {activity.event === 'created' ? (
                        <div className="border rounded-md overflow-hidden bg-white">
                            <div className="grid grid-cols-2 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
                                <div>欄位</div>
                                <div>初始內容</div>
                            </div>
                            <ScrollArea className="h-[300px]">
                                <div className="divide-y divide-gray-100">
                                    {filteredKeys
                                        .filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key))
                                        .map((key) => (
                                            <div key={key} className="grid grid-cols-2 px-4 py-3 text-sm hover:bg-gray-50/50 transition-colors">
                                                <div className="font-medium text-gray-700">{getFieldName(key)}</div>
                                                <div className="text-gray-900 font-medium">
                                                    {getFormattedValue(key, attributes[key], attributes)}
                                                </div>
                                            </div>
                                        ))}
                                    {filteredKeys.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key)).length === 0 && (
                                        <div className="p-8 text-center text-gray-500 text-sm">
                                            無初始資料
                                        </div>
                                    )}
                                </div>
                            </ScrollArea>
                        </div>
                    ) : (
                        <div className="border rounded-md overflow-hidden bg-white">
                            <div className="grid grid-cols-3 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
                                <div>欄位</div>
                                <div>異動前</div>
                                <div>異動後</div>
                            </div>
                            <ScrollArea className="h-[300px]">
                                {filteredKeys.some(key => !isSnapshotField(key)) ? (
                                    <div className="divide-y divide-gray-100">
                                        {filteredKeys
                                            .filter(key => !isSnapshotField(key))
                                            .map((key) => {
                                                const oldValue = old[key];
                                                const newValue = attributes[key];
                                                const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);

                                                return (
                                                    <div key={key} className={`grid grid-cols-3 px-4 py-3 text-sm transition-colors ${isChanged ? 'bg-amber-50/50' : 'hover:bg-gray-50/50'}`}>
                                                        <div className="font-medium text-gray-700 flex items-center">{getFieldName(key)}</div>
                                                        <div className="text-gray-500 break-words pr-4">
                                                            {getFormattedValue(key, oldValue, old)}
                                                        </div>
                                                        <div className="text-gray-900 font-medium break-words">
                                                            {activity.event === 'deleted' ? '-' : getFormattedValue(key, newValue, attributes)}
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                    </div>
                                ) : (
                                    <div className="p-8 text-center text-gray-500 text-sm">
                                        無詳細異動內容
                                    </div>
                                )}
                            </ScrollArea>
                        </div>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
}