import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import { Badge } from "@/Components/ui/badge";
import { ScrollArea } from "@/Components/ui/scroll-area";

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;
}

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 getEventBadgeColor = (event: string) => {
        switch (event) {
            case 'created': return 'bg-green-500';
            case 'updated': return 'bg-blue-500';
            case 'deleted': return 'bg-red-500';
            default: return 'bg-gray-500';
        }
    };

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

    const formatValue = (value: any) => {
        if (value === null || value === undefined) return <span className="text-gray-400">-</span>;
        if (typeof value === 'boolean') return value ? '是' : '否';
        if (typeof value === 'object') return JSON.stringify(value);
        return String(value);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-2xl">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        操作詳情
                        <Badge className={getEventBadgeColor(activity.event)}>
                            {getEventLabel(activity.event)}
                        </Badge>
                    </DialogTitle>
                    <DialogDescription>
                        {activity.created_at} 由 {activity.causer} 執行的操作
                    </DialogDescription>
                </DialogHeader>

                <div className="mt-4 space-y-4">
                    <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span className="text-gray-500">操作對象：</span>
                            <span className="font-medium ml-2">{activity.subject_type}</span>
                        </div>
                        <div>
                            <span className="text-gray-500">描述：</span>
                            <span className="font-medium ml-2">{activity.description}</span>
                        </div>
                    </div>

                    {activity.event === 'created' ? (
                        <div className="bg-gray-50 p-4 rounded-md text-center text-gray-500 text-sm">
                            已新增資料 (初始建立)
                        </div>
                    ) : (
                        <div className="border rounded-md">
                            <div className="grid grid-cols-3 bg-gray-50 p-2 text-sm font-medium text-gray-500">
                                <div>欄位</div>
                                <div>異動前</div>
                                <div>異動後</div>
                            </div>
                            <ScrollArea className="h-[300px]">
                                {filteredKeys.length > 0 ? (
                                    <div className="divide-y">
                                        {filteredKeys.map((key) => {
                                            const oldValue = old[key];
                                            const newValue = attributes[key];
                                            // Ensure we catch changes even if one value is missing/null
                                            // For deleted events, newValue might be empty, so we just show oldValue
                                            const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);

                                            return (
                                                <div key={key} className={`grid grid-cols-3 p-2 text-sm ${isChanged ? 'bg-yellow-50/30' : ''}`}>
                                                    <div className="font-medium text-gray-700">{key}</div>
                                                    <div className="text-gray-600 break-words pr-2">
                                                        {formatValue(oldValue)}
                                                    </div>
                                                    <div className="text-gray-900 break-words font-medium">
                                                        {activity.event === 'deleted' ? '-' : formatValue(newValue)}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                ) : (
                                    <div className="p-8 text-center text-gray-500 text-sm">
                                        無詳細異動內容
                                    </div>
                                )}
                            </ScrollArea>
                        </div>
                    )}
                </div>
            </DialogContent>
        </Dialog>
    );
}