import { useState, useEffect } from 'react';
import { Card } from '../../shared/ui/Card';
import { apiClient } from '../../shared/api/client';
import { Info, Cpu, Database, Server, Hash, Calendar, RefreshCw, AlertTriangle, CheckCircle2, ChevronLeft, ChevronRight } from 'lucide-react';

interface VersionInfo {
    status: string;
    version: string;
    node_version: string;
    platform: string;
    arch: string;
    timestamp: string;
}

interface UpdateEntry {
    version: string;
    date: string;
    title: string;
    changes: string[];
    type: 'feature' | 'fix' | 'urgent' | 'patch';
}

interface RemoteVersion {
    current: string;
    latest: string | null;
    needsUpdate: boolean;
    latestInfo: UpdateEntry | null;
    history: UpdateEntry[];
    error?: string;
}

export function VersionPage() {
    const [healthIcon, setHealthInfo] = useState<VersionInfo | null>(null);
    const [remoteInfo, setRemoteInfo] = useState<RemoteVersion | null>(null);
    const [loading, setLoading] = useState(true);
    const [checkingRemote, setCheckingRemote] = useState(false);
    const [updating, setUpdating] = useState(false);
    const [updateResult, setUpdateResult] = useState<{ success: boolean; message: string } | null>(null);
    const [currentPage, setCurrentPage] = useState(1);
    const ITEMS_PER_PAGE = 5;

    const fetchVersion = async () => {
        setLoading(true);
        try {
            // Add timestamp to prevent caching
            const res = await apiClient.get(`/health?t=${Date.now()}`);
            setHealthInfo(res.data);
        } catch (err) {
            console.error('Failed to fetch version info', err);
        } finally {
            setLoading(false);
        }
    };

    const fetchRemoteVersion = async () => {
        setCheckingRemote(true);
        try {
            const res = await apiClient.get(`/system/version/remote?t=${Date.now()}`);
            setRemoteInfo(res.data);
        } catch (err) {
            console.error('Failed to fetch remote version info', err);
        } finally {
            setCheckingRemote(false);
            setCurrentPage(1);
        }
    };

    useEffect(() => {
        fetchVersion();
        fetchRemoteVersion();
    }, []);

    const handleUpdate = async () => {
        if (!remoteInfo?.latest) return;

        const info = remoteInfo.latestInfo;
        const changelog = info ? `\n\n[주요 변경 내역]\n${info.changes.map(c => `- ${c}`).join('\n')}` : '';

        if (!confirm(`시스템을 v${info?.version || remoteInfo.latest} 버전으로 업데이트하시겠습니까?${changelog}\n\n업데이트 중에는 시스템이 일시적으로 중단될 수 있습니다.`)) {
            return;
        }

        setUpdating(true);
        setUpdateResult(null);

        try {
            const res = await apiClient.post('/system/version/update', { targetTag: remoteInfo.latest });
            setUpdateResult({ success: true, message: res.data.message });

            // Success: Wait a bit for server to settle, then refresh
            let countdown = 5;
            const timer = setInterval(() => {
                countdown -= 1;
                if (countdown <= 0) {
                    clearInterval(timer);
                    window.location.reload();
                } else {
                    setUpdateResult({
                        success: true,
                        message: `${res.data.message} (${countdown}초 후 페이지가 새로고침됩니다.)`
                    });
                }
            }, 1000);

        } catch (err: any) {
            console.error('Update failed', err);
            setUpdateResult({
                success: false,
                message: err.response?.data?.error || '업데이트 요청 중 오류가 발생했습니다.'
            });
            setUpdating(false);
        }
    };

    // Source of truth for versioning comes from the API
    const currentVersion = remoteInfo?.current || healthIcon?.version || '0.4.0.0';
    const buildDate = '2026-01-25';

    // IMPORTANT: needsUpdate should be true if remote has a higher version than local
    const needsUpdate = !!remoteInfo?.needsUpdate;

    return (
        <div className="page-container p-6 max-w-4xl mx-auto">
            <div className="flex justify-between items-start mb-8">
                <div>
                    <h1 className="text-2xl font-bold text-slate-900">시스템 관리 - 버전 정보</h1>
                    <p className="text-slate-500 mt-1">플랫폼 및 서버의 현재 릴리즈 버전을 확인하고 업데이트를 관리합니다.</p>
                </div>
                <button
                    onClick={() => { fetchVersion(); fetchRemoteVersion(); }}
                    disabled={loading || checkingRemote}
                    className="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors disabled:opacity-50"
                    title="새로고침"
                >
                    <RefreshCw size={20} className={loading || checkingRemote ? 'animate-spin' : ''} />
                </button>
            </div>

            {/* Update Alert Banner - Enhanced Visibility with Details */}
            {needsUpdate && !updateResult && remoteInfo?.latestInfo && (
                <div className={`mb-8 p-6 border-2 rounded-2xl shadow-xl flex flex-col md:flex-row items-center justify-between gap-6 ${remoteInfo.latestInfo.type === 'urgent' ? 'border-red-400 bg-red-50' : 'border-indigo-400 bg-indigo-50'}`}>
                    <div className="flex items-start gap-4 flex-1">
                        <div className={`p-3 rounded-xl shrink-0 ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-500 text-white' : 'bg-indigo-600 text-white'}`}>
                            <AlertTriangle size={24} />
                        </div>
                        <div className="space-y-1">
                            <div className="flex items-center gap-2">
                                <h4 className="text-xl font-black text-slate-900 leading-tight">
                                    {remoteInfo.latestInfo.type === 'urgent' ? '신속한 시스템 업데이트가 필요합니다' : '새로운 플랫폼 기능이 준비되었습니다'}
                                </h4>
                                <span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-600 text-white' : 'bg-indigo-600 text-white'}`}>
                                    {remoteInfo.latestInfo.type}
                                </span>
                            </div>
                            <p className="text-slate-600 font-medium text-sm">
                                현재: v{currentVersion} <span className="mx-2">→</span> 차기: <span className="font-black text-indigo-700 underline underline-offset-4">{remoteInfo.latest}</span>
                            </p>

                            {/* Detailed Changes from Tag Message */}
                            <div className="mt-4 p-4 bg-white/80 backdrop-blur-sm rounded-xl border border-white/50 shadow-sm overflow-hidden text-ellipsis">
                                <p className="font-bold text-slate-800 text-sm mb-2">{remoteInfo.latestInfo.title}</p>
                                <ul className="space-y-1.5">
                                    {remoteInfo.latestInfo.changes.map((c, i) => (
                                        <li key={i} className="flex items-start gap-2 text-xs text-slate-600">
                                            <div className="mt-1.5 w-1 h-1 rounded-full bg-slate-400 shrink-0"></div>
                                            <span>{c}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>

                    <button
                        onClick={handleUpdate}
                        disabled={updating}
                        className={`px-8 py-4 rounded-xl font-black text-lg transition-all shadow-lg hover:scale-105 active:scale-95 disabled:opacity-50 flex items-center gap-2 whitespace-nowrap min-w-[180px] shadow-indigo-200 ${remoteInfo.latestInfo.type === 'urgent' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-indigo-600 text-white hover:bg-slate-900'}`}
                    >
                        {updating ? <RefreshCw size={22} className="animate-spin" /> : null}
                        {updating ? '설치 중...' : '지금 업데이트'}
                    </button>
                </div>
            )}

            {/* Update Result Message */}
            {updateResult && (
                <div className={`mb-8 p-4 rounded-xl flex items-center gap-3 border ${updateResult.success ? 'bg-emerald-50 border-emerald-200 text-emerald-900' : 'bg-red-50 border-red-200 text-red-900'}`}>
                    {updateResult.success ? <CheckCircle2 size={20} className="text-emerald-500" /> : <AlertTriangle size={20} className="text-red-500" />}
                    <p className="font-medium">{updateResult.message}</p>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Frontend Platform Version */}
                <Card className="p-6 border-slate-200 shadow-sm relative overflow-hidden group">
                    <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                        <Cpu size={120} />
                    </div>
                    <div className="flex items-center gap-3 mb-6">
                        <div className="p-3 bg-indigo-50 text-indigo-600 rounded-xl">
                            <Hash size={24} />
                        </div>
                        <div>
                            <h3 className="text-sm font-bold text-slate-500 uppercase tracking-wider">Frontend Platform</h3>
                            <p className="text-xl font-black text-slate-900">Smart IMS 클라이언트</p>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <div className="flex justify-between items-center py-2 border-b border-slate-50">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Info size={14} /> 현재 버전</span>
                            <span className="font-bold text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full text-xs">v{currentVersion}</span>
                        </div>
                        <div className="flex justify-between items-center py-2 border-b border-slate-50">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Calendar size={14} /> 빌드 일자</span>
                            <span className="font-medium text-slate-700 text-sm">{buildDate}</span>
                        </div>
                        <div className="flex justify-between items-center py-2">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Database size={14} /> 아키텍처</span>
                            <span className="font-medium text-slate-700 text-sm">React Agentic Architecture</span>
                        </div>
                    </div>
                </Card>

                {/* Backend Server Version */}
                <Card className="p-6 border-slate-200 shadow-sm relative overflow-hidden group">
                    <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                        <Server size={120} />
                    </div>
                    <div className="flex items-center gap-3 mb-6">
                        <div className="p-3 bg-emerald-50 text-emerald-600 rounded-xl">
                            <Database size={24} />
                        </div>
                        <div>
                            <h3 className="text-sm font-bold text-slate-500 uppercase tracking-wider">Backend Core</h3>
                            <p className="text-xl font-black text-slate-900">IMS 서비스 엔진</p>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <div className="flex justify-between items-center py-2 border-b border-slate-50">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Cpu size={14} /> 런타임 환경</span>
                            <span className="font-medium text-slate-700 text-sm">
                                {loading ? 'Checking...' : healthIcon?.node_version ? `Node.js ${healthIcon.node_version}` : 'N/A'}
                            </span>
                        </div>
                        <div className="flex justify-between items-center py-2 border-b border-slate-50">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Server size={14} /> 운영 체제</span>
                            <span className="font-medium text-slate-700 text-sm uppercase">
                                {loading ? '...' : healthIcon?.platform ? `${healthIcon.platform} (${healthIcon.arch})` : 'Unknown'}
                            </span>
                        </div>
                        <div className="flex justify-between items-center py-2 border-b border-slate-50">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><Calendar size={14} /> 서버 타임스탬프</span>
                            <span className="font-medium text-slate-700 text-sm">
                                {loading ? '...' : healthIcon?.timestamp || 'Unknown'}
                            </span>
                        </div>
                        <div className="flex justify-between items-center py-2">
                            <span className="text-slate-500 text-sm flex items-center gap-2"><RefreshCw size={14} /> 엔진 상태</span>
                            <span className={`font-bold text-xs uppercase ${healthIcon?.status === 'ok' ? 'text-emerald-500' : 'text-red-500'}`}>
                                {loading ? '...' : healthIcon?.status === 'ok' ? 'Running' : 'Offline'}
                            </span>
                        </div>
                    </div>
                </Card>
            </div>

            {/* Remote Info Status (Debug/Info) */}
            {remoteInfo && (
                <div className="mt-4 text-[11px] text-slate-400 flex items-center gap-3 px-2">
                    <div className="flex items-center gap-1">
                        <div className={`w-1.5 h-1.5 rounded-full ${remoteInfo.error ? 'bg-red-400' : 'bg-emerald-400'}`}></div>
                        <span>원격 저장소 상태: {remoteInfo.error ? `오류 (${remoteInfo.error})` : '정상'}</span>
                    </div>
                    {!remoteInfo.error && (
                        <span>최신 배포 태그: <span className="font-bold text-slate-500">{remoteInfo.latest || '없음'}</span></span>
                    )}
                </div>
            )}
            {/* Release History Section */}
            <div className="mt-12 space-y-6">
                <h2 className="text-xl font-bold text-slate-900 flex items-center gap-2 mb-4">
                    <Calendar size={22} className="text-indigo-600" />
                    업데이트 히스토리
                </h2>

                <div className="space-y-4">
                    {remoteInfo?.history && remoteInfo.history.length > 0 ? (
                        <>
                            {remoteInfo.history
                                .slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
                                .map((entry, idx) => (
                                    <Card key={entry.version} className={`p-6 border-slate-200 shadow-sm transition-all hover:border-indigo-200 ${idx === 0 && currentPage === 1 ? 'bg-indigo-50/20 border-indigo-100 ring-2 ring-indigo-50/50 shadow-indigo-100/50' : ''}`}>
                                        <div className="flex flex-col md:flex-row md:items-center gap-4 mb-4">
                                            <div className="flex items-center gap-2">
                                                <span className={`px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider ${entry.type === 'feature' ? 'bg-indigo-600 text-white' : entry.type === 'urgent' ? 'bg-red-600 text-white' : 'bg-slate-200 text-slate-700'}`}>
                                                    {entry.type}
                                                </span>
                                                <span className="font-bold text-slate-900 font-mono text-base">v{entry.version}</span>
                                            </div>
                                            <div className="hidden md:block w-px h-4 bg-slate-200 mx-2"></div>
                                            <div className="flex-1">
                                                <h4 className="text-sm font-bold text-slate-800">{entry.title}</h4>
                                            </div>
                                            <div className="text-xs text-slate-400 font-medium px-2 py-1 bg-slate-50 rounded italic">{entry.date}</div>
                                        </div>
                                        <ul className="space-y-2">
                                            {entry.changes.map((change, i) => (
                                                <li key={i} className="flex items-start gap-2 text-[13px] text-slate-600 leading-relaxed">
                                                    <div className="mt-1.5 w-1.5 h-1.5 rounded-full bg-indigo-500/50 flex-shrink-0 animate-pulse"></div>
                                                    <span>{change}</span>
                                                </li>
                                            ))}
                                        </ul>
                                    </Card>
                                ))}

                            {/* Pagination Controls */}
                            {remoteInfo.history.length > ITEMS_PER_PAGE && (
                                <div className="flex justify-center items-center gap-4 mt-8 pt-4 border-t border-slate-100">
                                    <button
                                        onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                                        disabled={currentPage === 1}
                                        className="p-2 rounded-lg border border-slate-200 text-slate-500 hover:bg-slate-50 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                                    >
                                        <ChevronLeft size={20} />
                                    </button>

                                    <div className="flex items-center gap-1">
                                        {Array.from({ length: Math.ceil(Math.min(50, remoteInfo.history.length) / ITEMS_PER_PAGE) }).map((_, i) => (
                                            <button
                                                key={i}
                                                onClick={() => setCurrentPage(i + 1)}
                                                className={`w-8 h-8 rounded-lg text-sm font-bold transition-all ${currentPage === i + 1 ? 'bg-indigo-600 text-white shadow-md shadow-indigo-200' : 'text-slate-400 hover:text-indigo-600 hover:bg-indigo-50'}`}
                                            >
                                                {i + 1}
                                            </button>
                                        ))}
                                    </div>

                                    <button
                                        onClick={() => setCurrentPage(p => Math.min(Math.ceil(remoteInfo.history.length / ITEMS_PER_PAGE), p + 1))}
                                        disabled={currentPage === Math.ceil(remoteInfo.history.length / ITEMS_PER_PAGE)}
                                        className="p-2 rounded-lg border border-slate-200 text-slate-500 hover:bg-slate-50 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                                    >
                                        <ChevronRight size={20} />
                                    </button>
                                </div>
                            )}
                        </>
                    ) : (
                        <div className="text-center py-12 text-slate-400 italic bg-slate-50 rounded-xl border border-dashed border-slate-200">
                            원격 저장소에서 업데이트 내역을 가져오는 중이거나 내역이 없습니다.
                        </div>
                    )}
                </div>
            </div>

            {/* Bottom Integrity Banner */}
            <Card className="mt-12 p-6 bg-slate-900 text-white border-none shadow-xl overflow-hidden relative">
                <div className="relative z-10">
                    <h3 className="text-lg font-bold mb-2 flex items-center gap-2">
                        <ShieldCheck size={20} className="text-amber-400" /> Platform Integrity
                    </h3>
                    <p className="text-slate-400 text-sm leading-relaxed max-w-2xl">
                        Smart IMS 플랫폼은 데이터 보안과 시스템 안정성을 최우선으로 설계되었습니다.
                        모든 모듈은 Sokuree 아키텍처 표준을 준수하며, 암호화 키 관리 시스템(L2 Protection)에 의해 보호되고 있습니다.
                    </p>
                </div>
                <div className="absolute -bottom-4 -right-4 opacity-10">
                    <Box size={160} />
                </div>
            </Card>
        </div>
    );
}

// Internal Local Components if not available in shared/ui
function ShieldCheck({ size, className }: { size?: number, className?: string }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={size || 24} height={size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
            <path d="m9 12 2 2 4-4" />
        </svg>
    );
}

function Box({ size, className }: { size?: number, className?: string }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={size || 24} height={size || 24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
            <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
            <path d="m3.3 7 8.7 5 8.7-5" />
            <path d="M12 22V12" />
        </svg>
    );
}