import React, { useState, useMemo, useRef, useEffect } from 'react';
import { Target, Plus, Minus, FileUp, Trash2, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, CheckCircle2, Crosshair, UploadCloud, X, List } from 'lucide-react';

// --- Firebase SDKのインポート ---
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, doc, setDoc, deleteDoc, onSnapshot } from 'firebase/firestore';

// --- Firebase初期化 ---
let app, auth, db;
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

try {
    const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
    app = initializeApp(firebaseConfig);
    auth = getAuth(app);
    db = getFirestore(app);
} catch (error) {
    console.error("Firebase initialization error:", error);
}

// デバウンス関数（Firestoreへの過剰な書き込みを防ぐ）
const debounce = (func, wait) => {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => func(...args), wait);
    };
};

const App = () => {
    // iOS (PWA) 用のメタタグを動的に追加
    useEffect(() => {
        const metaTags = [
            { name: 'apple-mobile-web-app-capable', content: 'yes' },
            { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
            { name: 'apple-mobile-web-app-title', content: '建方キング' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ];
        
        metaTags.forEach(tag => {
            let existingTag = document.querySelector(`meta[name="${tag.name}"]`);
            if (!existingTag) {
                const meta = document.createElement('meta');
                meta.name = tag.name;
                meta.content = tag.content;
                document.head.appendChild(meta);
            } else {
                existingTag.content = tag.content;
            }
        });
    }, []);

    // --- State管理 ---
    const [user, setUser] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [projects, setProjects] = useState([]);
    const [activeProjectId, setActiveProjectId] = useState(null);
    const [projectToDelete, setProjectToDelete] = useState(null);
    
    // UI系State
    const [isImportModalOpen, setIsImportModalOpen] = useState(false);
    const [importText, setImportText] = useState("");
    const [isEditingProjectName, setIsEditingProjectName] = useState(false);
    const [editingName, setEditingName] = useState("");
    const fileInputRef = useRef(null);

    // --- 認証 (Auth Before Queries) ---
    useEffect(() => {
        if (!auth) return;
        const initAuth = async () => {
            try {
                if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                    await signInWithCustomToken(auth, __initial_auth_token);
                } else {
                    await signInAnonymously(auth);
                }
            } catch (error) {
                console.error("Authentication failed:", error);
                setIsLoading(false);
            }
        };
        initAuth();

        const unsubscribe = onAuthStateChanged(auth, (usr) => {
            setUser(usr);
            setIsLoading(false);
        });
        return () => unsubscribe();
    }, []);

    // --- Firestoreからのデータ購読 ---
    useEffect(() => {
        if (!user || !db) return;
        // RULE 1: 厳密なパスを使用
        const projectsRef = collection(db, 'artifacts', appId, 'users', user.uid, 'projects');
        
        const unsubscribe = onSnapshot(projectsRef, (snapshot) => {
            const loadedProjects = snapshot.docs.map(doc => doc.data());
            // RULE 2: メモリ上でソート（Firestoreの複雑なクエリを避ける）
            loadedProjects.sort((a, b) => b.updatedAt - a.updatedAt);
            setProjects(loadedProjects);
        }, (error) => {
            console.error("Firestore Snapshot Error:", error);
        });
        
        return () => unsubscribe();
    }, [user]);

    // --- Firestore 保存ロジック (Debounce) ---
    const saveToFirestore = useRef(
        debounce((uid, projId, data) => {
            if (!db) return;
            const projectRef = doc(db, 'artifacts', appId, 'users', uid, 'projects', projId);
            setDoc(projectRef, data).catch(e => console.error("Save Error:", e));
        }, 800) // 0.8秒間操作がなければクラウドに保存
    ).current;

    // 現在選択されているプロジェクトを取得
    const activeProject = useMemo(() => projects.find(p => p.id === activeProjectId), [projects, activeProjectId]);

    // プロジェクトのデータを更新する共通関数
    const updateProjectData = (updates) => {
        if (!activeProjectId || !user) return;
        const currentProject = projects.find(p => p.id === activeProjectId);
        if (!currentProject) return;
        
        const updatedProject = { ...currentProject, ...updates, updatedAt: Date.now() };
        
        // 1. ローカルStateを即座に更新 (UIにすぐ反映させる)
        setProjects(prev => prev.map(p => p.id === activeProjectId ? updatedProject : p));
        // 2. バックグラウンドでクラウドへ保存
        saveToFirestore(user.uid, activeProjectId, updatedProject);
    };

    // --- プロジェクト操作 ---
    const createProject = async () => {
        if (!user || !db) return;
        const newId = Date.now().toString();
        const newProject = {
            id: newId,
            name: `新規現場 ${new Date().toLocaleDateString()}`,
            updatedAt: Date.now(),
            columns: [{ id: 1, name: '1節-A1', designX: 100.0000, designY: 200.0000, measuredX: 100.0000, measuredY: 200.0000 }],
            activeColumnId: 1,
            xAxisIs: 'N',
            tolerance: 5.0000,
            perfectThreshold: 1.0000,
            stepUnit: 0.001
        };
        
        // 新規作成時はすぐにFirestoreに保存
        await setDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'projects', newId), newProject);
        setActiveProjectId(newId);
    };

    const confirmDeleteProject = async (id) => {
        if (!user || !db) return;
        // UI上から先に消す
        setProjects(prev => prev.filter(p => p.id !== id));
        if (activeProjectId === id) setActiveProjectId(null);
        // クラウド上から削除
        await deleteDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'projects', id));
        setProjectToDelete(null);
    };

    // --- アクティブ現場のデータ取得と操作 ---
    const columns = activeProject?.columns || [];
    const activeColumnId = activeProject?.activeColumnId || (columns[0]?.id);
    const activeColumn = useMemo(() => columns.find(c => c.id === activeColumnId) || columns[0], [columns, activeColumnId]);
    const xAxisIs = activeProject?.xAxisIs || 'N';
    const tolerance = activeProject?.tolerance || 5.0;
    const perfectThreshold = activeProject?.perfectThreshold || 1.0;
    const stepUnit = activeProject?.stepUnit || 0.001;

    const setXAxisIs = (val) => updateProjectData({ xAxisIs: val });
    const setStepUnit = (val) => updateProjectData({ stepUnit: val });
    const setActiveColumnId = (id) => updateProjectData({ activeColumnId: id });

    // 実測値入力更新
    const updateActiveColumn = (field, value) => {
        if (!activeColumn) return;
        const val = value === "" ? "" : parseFloat(value);
        const newColumns = columns.map(c => c.id === activeColumn.id ? { ...c, [field]: val } : c);
        updateProjectData({ columns: newColumns });
    };

    // +/- ボタンでの調整
    const adjustValue = (field, delta) => {
        if (!activeColumn) return;
        const currentVal = parseFloat(activeColumn[field]) || 0;
        const newVal = (Math.round(currentVal * 10000) + Math.round(delta * 10000)) / 10000;
        updateActiveColumn(field, newVal);
    };

    // --- 現場名の編集 ---
    const startEditName = () => {
        if (!activeProject) return;
        setEditingName(activeProject.name);
        setIsEditingProjectName(true);
    };

    const commitEditName = () => {
        if (editingName.trim()) {
            updateProjectData({ name: editingName.trim() });
        }
        setIsEditingProjectName(false);
    };

    // --- モニター計算 ---
    const stats = useMemo(() => {
        if (!activeColumn) return null;
        // 空文字の場合は0として計算しクラッシュ回避
        const mX = parseFloat(activeColumn.measuredX) || 0;
        const dX = parseFloat(activeColumn.designX) || 0;
        const mY = parseFloat(activeColumn.measuredY) || 0;
        const dY = parseFloat(activeColumn.designY) || 0;

        const dx = (mX - dX) * 1000;
        const dy = (mY - dY) * 1000;
        
        let labels = { top: '', bottom: '', right: '', left: '' };
        let fixTextX = ""; let fixTextY = "";

        if (xAxisIs === 'N') {
            labels = { top: '北 (X+)', bottom: '南 (X-)', right: '東 (Y+)', left: '西 (Y-)' };
            fixTextX = -dx > 0 ? "北" : "南"; fixTextY = -dy > 0 ? "東" : "西";
        } else if (xAxisIs === 'S') {
            labels = { top: '南 (X+)', bottom: '北 (X-)', right: '西 (Y+)', left: '東 (Y-)' };
            fixTextX = -dx > 0 ? "南" : "北"; fixTextY = -dy > 0 ? "西" : "東";
        } else if (xAxisIs === 'E') {
            labels = { top: '東 (X+)', bottom: '西 (X-)', right: '南 (Y+)', left: '北 (Y-)' };
            fixTextX = -dx > 0 ? "東" : "西"; fixTextY = -dy > 0 ? "南" : "北";
        } else if (xAxisIs === 'W') {
            labels = { top: '西 (X+)', bottom: '東 (X-)', right: '北 (Y+)', left: '南 (Y-)' };
            fixTextX = -dx > 0 ? "西" : "東"; fixTextY = -dy > 0 ? "北" : "南";
        }

        return { 
            dx, dy, fixX: -dx, fixY: -dy, 
            fixTextX, fixTextY, labels, 
            isOk: Math.abs(dx) <= tolerance && Math.abs(dy) <= tolerance, 
            isPerfect: Math.abs(dx) <= perfectThreshold && Math.abs(dy) <= perfectThreshold 
        };
    }, [activeColumn, xAxisIs, tolerance, perfectThreshold]);

    const formatWithSign = (val, dec = 1) => (val > 0 ? "+" : (val < 0 ? "" : "+")) + val.toFixed(dec);

    // --- インポート/エクスポート ---
    const handleFileChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (event) => setImportText(event.target.result);
            reader.readAsText(file, 'Shift-JIS');
        }
    };

    const handleImport = () => {
        const lines = importText.split('\n').filter(l => l.trim() !== "");
        const newPillars = [];
        lines.forEach((line, index) => {
            const parts = line.split(',').map(p => p.trim());
            let name, x, y;
            if (parts[0] === 'A01' && parts.length >= 5) {
                name = parts[2]; x = parseFloat(parts[3]); y = parseFloat(parts[4]);
            } else {
                const spaceParts = line.split(/[\t, ]+/).map(p => p.trim());
                if (spaceParts.length >= 3) { name = spaceParts[0]; x = parseFloat(spaceParts[1]); y = parseFloat(spaceParts[2]); }
            }
            if (!isNaN(x) && !isNaN(y)) {
                newPillars.push({ id: Date.now() + index, name: name || `柱-${columns.length + index + 1}`, designX: x, designY: y, measuredX: x, measuredY: y });
            }
        });
        if (newPillars.length > 0) {
            updateProjectData({
                columns: [...columns, ...newPillars],
                activeColumnId: newPillars[0].id
            });
            setImportText(""); setIsImportModalOpen(false);
        }
    };

    const exportToSIMA = () => {
        let content = "Z00,*** SIMA測量データ By HO_CADpao ***,\r\n";
        content += `G00, 01,無題0(Pao標準テンプレート)(Zone03),\r\n`;
        content += "Z00,----- 座標データ -----\r\n";
        content += "A00,\r\n";
        columns.forEach((col, idx) => {
            const mX = parseFloat(col.measuredX) || 0;
            const mY = parseFloat(col.measuredY) || 0;
            content += `A01, ${(idx + 1).toString().padStart(4, ' ')}, ${col.name}, ${mX.toFixed(4)}, ${mY.toFixed(4)}, 0.000,\r\n`;
        });
        content += "A99,\r\n";
        const blob = new Blob([content], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${activeProject?.name || '建方実測値'}_${new Date().getTime()}.sim`;
        a.click();
        URL.revokeObjectURL(url);
    };

    // --- ロード中の画面 ---
    if (isLoading) {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center bg-slate-900 text-white font-sans">
                <Target size={64} className="animate-spin text-blue-500 mb-6" />
                <h1 className="text-2xl font-black italic tracking-widest">建方キング Pro</h1>
                <p className="text-slate-400 mt-2 text-sm font-bold">クラウド同期中...</p>
            </div>
        );
    }

    // --- 【画面1】現場一覧画面 ---
    if (!activeProjectId) {
        return (
            <div className="min-h-screen bg-slate-100 p-4 max-w-lg mx-auto font-sans text-slate-900 pb-20">
                <style>{`body { -webkit-tap-highlight-color: transparent; }`}</style>
                <div className="flex justify-between items-center mb-8 bg-slate-900 text-white p-6 rounded-[2rem] shadow-xl">
                    <div className="flex items-center gap-3">
                        <div className="bg-blue-600 p-2 rounded-xl"><Target size={28} className="text-white" /></div>
                        <h1 className="text-2xl font-black italic tracking-tighter">建方キング Pro</h1>
                    </div>
                </div>
                
                <div className="flex justify-between items-end mb-5 px-2">
                    <h2 className="text-lg font-black text-slate-700">保存された現場データ</h2>
                    <button onClick={createProject} className="bg-blue-600 text-white flex items-center gap-2 px-5 py-3 rounded-2xl font-black shadow-lg shadow-blue-600/30 active:scale-95 transition-transform">
                        <Plus size={20} /> 新規現場
                    </button>
                </div>

                <div className="space-y-4">
                    {projects.length === 0 ? (
                        <div className="text-center p-12 bg-white rounded-[2.5rem] border border-slate-200 shadow-sm mt-8">
                            <UploadCloud size={64} className="mx-auto text-slate-200 mb-6" />
                            <p className="text-slate-500 font-black text-lg">保存された現場はありません</p>
                            <p className="text-sm text-slate-400 mt-2 font-bold">右上のボタンから新しく作成してください</p>
                        </div>
                    ) : (
                        projects.map(p => (
                            <div key={p.id} className="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-200 flex justify-between items-center">
                                <div className="flex-1 cursor-pointer pr-4" onClick={() => setActiveProjectId(p.id)}>
                                    <h3 className="font-black text-xl text-slate-800 mb-2 truncate">{p.name}</h3>
                                    <div className="flex items-center gap-2">
                                        <p className="text-[11px] font-black text-slate-400 bg-slate-100 inline-block px-3 py-1.5 rounded-lg uppercase tracking-widest">
                                            最終保存: {new Date(p.updatedAt).toLocaleString([], {year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit'})}
                                        </p>
                                    </div>
                                </div>
                                <button onClick={() => setProjectToDelete(p.id)} className="p-4 bg-slate-50 text-slate-400 hover:bg-red-50 hover:text-red-500 rounded-2xl transition-colors active:scale-90">
                                    <Trash2 size={24} />
                                </button>
                            </div>
                        ))
                    )}
                </div>

                {/* 削除確認モーダル */}
                {projectToDelete && (
                    <div className="fixed inset-0 z-50 bg-slate-900/90 backdrop-blur-sm flex items-center justify-center p-4">
                        <div className="bg-white p-8 rounded-[3rem] w-full max-w-sm text-center shadow-2xl">
                            <div className="bg-red-100 text-red-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                                <Trash2 size={40} />
                            </div>
                            <h3 className="text-2xl font-black mb-4">現場を削除しますか？</h3>
                            <p className="text-slate-500 mb-10 font-bold">この現場のデータは完全に消去され、<br/>元に戻すことはできません。</p>
                            <div className="flex gap-4">
                                <button onClick={() => setProjectToDelete(null)} className="flex-1 bg-slate-100 p-5 rounded-2xl font-black text-slate-500 active:bg-slate-200">キャンセル</button>
                                <button onClick={() => confirmDeleteProject(projectToDelete)} className="flex-1 bg-red-600 p-5 rounded-2xl font-black text-white shadow-xl shadow-red-600/30 active:scale-95">削除する</button>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        );
    }

    // --- 【画面2】現場詳細 (計測) 画面 ---
    return (
        <div className="min-h-screen flex flex-col pb-10 select-none overflow-x-hidden max-w-lg mx-auto bg-slate-100 shadow-2xl font-sans text-slate-900">
            <style>{`
                body { -webkit-tap-highlight-color: transparent; background-color: #f1f5f9; }
                .no-scrollbar::-webkit-scrollbar { display: none; }
                input[type="number"]::-webkit-inner-spin-button, 
                input[type="number"]::-webkit-outer-spin-button { opacity: 1; margin: 0; }
                .active-site-card { border-left: 12px solid #2563eb !important; background-color: #f0f9ff !important; box-shadow: inset 0 0 15px rgba(37, 99, 235, 0.08); }
                .font-mono-precision { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
                .btn-touch { min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; cursor: pointer; }
            `}</style>

            {/* ヘッダー */}
            <header className="bg-slate-900 text-white p-4 sticky top-0 z-40 border-b-4 border-blue-600 shadow-2xl">
                <div className="flex justify-between items-center mb-4 px-1 gap-3">
                    <button onClick={() => setActiveProjectId(null)} className="p-2.5 bg-slate-800 rounded-xl active:scale-95 text-slate-300 hover:text-white transition-all"><ArrowLeft size={22} /></button>
                    
                    {isEditingProjectName ? (
                        <div className="flex-1 flex gap-2">
                            <input autoFocus value={editingName} onChange={e => setEditingName(e.target.value)} className="flex-1 bg-slate-800 text-white px-4 py-2 rounded-xl outline-none font-black text-base border-2 border-blue-500" />
                            <button onClick={commitEditName} className="bg-blue-600 px-4 rounded-xl font-black text-sm shadow-lg active:scale-95">確定</button>
                        </div>
                    ) : (
                        <div className="flex-1 text-center cursor-pointer active:opacity-50" onClick={startEditName}>
                            <h1 className="text-lg font-black italic tracking-tighter truncate">{activeProject?.name}</h1>
                            <p className="text-[9px] text-slate-400 mt-0.5 tracking-widest">最終保存: {new Date(activeProject?.updatedAt).toLocaleTimeString()}</p>
                        </div>
                    )}
                    
                    <div className="w-[42px]"></div> {/* タイトル中央揃えのためのダミー */}
                </div>
                <div className="bg-slate-800 p-2 rounded-2xl border border-slate-700">
                    <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2 text-center italic">現場のX軸プラス(上)の方角を指定</p>
                    <div className="flex gap-2 w-full">
                        {['N','S','E','W'].map(d => {
                            const labels = { 'N':'北','S':'南','E':'東','W':'西' };
                            return (
                                <button key={d} onClick={() => setXAxisIs(d)} 
                                    className={`flex-1 h-12 flex items-center justify-center rounded-xl text-base font-black transition-all ${xAxisIs === d ? 'bg-blue-600 text-white shadow-xl scale-105 border-2 border-blue-400' : 'bg-slate-700 text-slate-400 hover:text-slate-200'}`}>
                                    {labels[d]}
                                </button>
                            );
                        })}
                    </div>
                </div>
            </header>

            <main className="flex-1 p-3 space-y-4">
                {/* モニター */}
                <div className="bg-white p-5 rounded-[3rem] shadow-sm border border-slate-200 flex flex-col items-center relative">
                    <div className="flex justify-between items-center w-full mb-4 px-1">
                        <h2 className="text-2xl font-black text-slate-800 italic tracking-tighter truncate max-w-[200px]">{activeColumn?.name || "---"}</h2>
                    </div>
                    
                    <div className="relative w-[300px] h-[300px] bg-slate-900 rounded-[2.5rem] border-4 border-slate-800 overflow-hidden shadow-2xl">
                        <div className="absolute top-1/2 left-0 w-full h-[1px] bg-slate-700/50"></div>
                        <div className="absolute left-1/2 top-0 h-full w-[1px] bg-slate-700/50"></div>
                        
                        <div className="absolute top-3 left-1/2 -translate-x-1/2 text-sm font-black text-blue-400 bg-slate-900/90 px-4 py-1 rounded-full border border-blue-900">{stats?.labels.top}</div>
                        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 text-xs font-black text-slate-500 uppercase">{stats?.labels.bottom}</div>
                        <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-black text-slate-500 rotate-90 uppercase">{stats?.labels.right}</div>
                        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-black text-slate-500 -rotate-90 uppercase">{stats?.labels.left}</div>
                        
                        {stats && (
                            <div className="absolute w-6 h-6 rounded-full border-2 border-white shadow-xl transition-all duration-300 flex items-center justify-center"
                              style={{ 
                                backgroundColor: stats.isPerfect ? '#22c55e' : (stats.isOk ? '#3b82f6' : '#ef4444'), 
                                left: `${150 + stats.dy * 15 - 12}px`, 
                                top: `${150 - stats.dx * 15 - 12}px` 
                              }}>
                                <div className="w-1.5 h-1.5 bg-white rounded-full"></div>
                            </div>
                        )}
                    </div>

                    <div className="grid grid-cols-2 gap-3 w-full mt-6 text-center text-slate-800 font-black">
                        <div className="bg-slate-50 p-4 rounded-3xl border border-slate-100 shadow-inner">
                            <p className="text-[11px] font-black text-slate-400 mb-1 uppercase tracking-widest">X軸ズレ (上下方向)</p>
                            <p className={`text-2xl font-black ${Math.abs(stats?.dx || 0) > tolerance ? 'text-red-500' : 'text-blue-600'}`}>{formatWithSign(stats?.dx || 0, 1)}<span className="text-xs ml-1 font-bold">mm</span></p>
                        </div>
                        <div className="bg-slate-50 p-4 rounded-3xl border border-slate-100 shadow-inner">
                            <p className="text-[11px] font-black text-slate-400 mb-1 uppercase tracking-widest">Y軸ズレ (左右方向)</p>
                            <p className={`text-2xl font-black ${Math.abs(stats?.dy || 0) > tolerance ? 'text-red-500' : 'text-blue-600'}`}>{formatWithSign(stats?.dy || 0, 1)}<span className="text-xs ml-1 font-bold">mm</span></p>
                        </div>
                    </div>
                </div>

                {/* 指示パネル */}
                <div className={`p-6 rounded-[3.5rem] shadow-2xl border-b-[12px] flex flex-col items-center justify-center min-h-[350px] text-white transition-all ${stats?.isPerfect ? 'bg-green-600 border-green-800' : (stats?.isOk ? 'bg-blue-600 border-blue-800' : 'bg-red-600 border-red-800')}`}>
                    <div className="text-[11px] font-black uppercase tracking-[0.4em] bg-black/20 px-6 py-2 rounded-full mb-8 italic shadow-inner">{stats?.isPerfect ? '完全合格' : (stats?.isOk ? '精度内 (ゼロへ追い込み中)' : '建ち直し指示が必要です')}</div>
                    {stats?.isPerfect ? (
                        <div className="flex flex-col items-center animate-bounce text-center"><CheckCircle2 size={100} /><h3 className="text-6xl font-black italic mt-4 uppercase tracking-tighter">固定OK</h3></div>
                    ) : (
                        <div className="w-full flex justify-around items-center px-2">
                            {Math.abs(stats?.fixX || 0) > 0.0001 && (
                                <div className="flex flex-col items-center gap-4">
                                    <div className="bg-white p-6 rounded-full text-slate-900 shadow-2xl">{stats?.fixX > 0 ? <ArrowUp size={56} /> : <ArrowDown size={56} />}</div>
                                    <div className="text-center">
                                        <p className="text-2xl font-black">{stats?.fixTextX}へ</p>
                                        <p className="text-6xl font-black tracking-tighter font-mono-precision">{Math.abs(stats?.fixX || 0).toFixed(1)}<span className="text-xl ml-1 font-bold text-white">mm</span></p>
                                    </div>
                                </div>
                            )}
                            <div className="h-32 w-[2px] bg-white/20 mx-2"></div>
                            {Math.abs(stats?.fixY || 0) > 0.0001 && (
                                <div className="flex flex-col items-center gap-4">
                                    <div className="bg-white p-6 rounded-full text-slate-900 shadow-2xl">{stats?.fixY > 0 ? <ArrowRight size={56} /> : <ArrowLeft size={56} />}</div>
                                    <div className="text-center">
                                        <p className="text-2xl font-black">{stats?.fixTextY}へ</p>
                                        <p className="text-6xl font-black tracking-tighter font-mono-precision">{Math.abs(stats?.fixY || 0).toFixed(1)}<span className="text-xl ml-1 font-bold text-white">mm</span></p>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                {/* 実測入力 */}
                <div className="bg-white p-5 rounded-[3rem] shadow-sm border border-slate-200">
                    <h3 className="font-black text-slate-800 flex items-center gap-3 mb-6 border-b pb-4 border-slate-50 text-sm uppercase italic tracking-widest"><Crosshair size={24} className="text-blue-600" />実測座標入力 (m)</h3>
                    <div className="space-y-8 text-left">
                        <div className="space-y-2">
                            <div className="flex justify-between text-[11px] font-black text-blue-600 px-2 italic uppercase tracking-tighter"><span>北方向 X軸入力</span><span className="text-slate-400 font-mono-precision bg-slate-50 px-2 rounded-lg border font-bold">設計: {(parseFloat(activeColumn?.designX) || 0).toFixed(4)}</span></div>
                            <div className="flex items-center gap-2">
                                <button onClick={() => adjustValue('measuredX', -stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm btn-touch border"><Minus size={28} /></button>
                                <div className="flex-1 bg-blue-50 p-5 rounded-[2.5rem] border-2 border-blue-200 overflow-hidden text-center shadow-inner flex items-center justify-center">
                                    <input type="number" step="0.0001" value={activeColumn?.measuredX !== undefined ? activeColumn.measuredX : ""} onChange={(e) => updateActiveColumn('measuredX', e.target.value)} className="w-full bg-transparent font-mono-precision font-black text-blue-900 text-3xl outline-none text-center tracking-tighter" />
                                </div>
                                <button onClick={() => adjustValue('measuredX', stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm btn-touch border"><Plus size={28} /></button>
                            </div>
                        </div>
                        <div className="space-y-2">
                            <div className="flex justify-between text-[11px] font-black text-blue-600 px-2 italic uppercase tracking-tighter"><span>東方向 Y軸入力</span><span className="text-slate-400 font-mono-precision bg-slate-50 px-2 rounded-lg border font-bold">設計: {(parseFloat(activeColumn?.designY) || 0).toFixed(4)}</span></div>
                            <div className="flex items-center gap-2">
                                <button onClick={() => adjustValue('measuredY', -stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm btn-touch border"><Minus size={28} /></button>
                                <div className="flex-1 bg-blue-50 p-5 rounded-[2.5rem] border-2 border-blue-200 overflow-hidden text-center shadow-inner flex items-center justify-center">
                                    <input type="number" step="0.0001" value={activeColumn?.measuredY !== undefined ? activeColumn.measuredY : ""} onChange={(e) => updateActiveColumn('measuredY', e.target.value)} className="w-full bg-transparent font-mono-precision font-black text-blue-900 text-3xl outline-none text-center tracking-tighter" />
                                </div>
                                <button onClick={() => adjustValue('measuredY', stepUnit)} className="bg-slate-100 p-5 rounded-2xl active:bg-slate-300 transition-colors shrink-0 shadow-sm btn-touch border"><Plus size={28} /></button>
                            </div>
                        </div>
                    </div>
                    <div className="flex gap-3 mt-8 bg-slate-100 p-2 rounded-2xl border border-slate-200 justify-center font-black">
                        <button onClick={() => setStepUnit(0.001)} className={`flex-1 py-4 text-xs font-black rounded-xl transition-all ${stepUnit === 0.001 ? 'bg-blue-600 text-white shadow-xl scale-105' : 'text-slate-500 hover:text-slate-800'}`}>1mm単位</button>
                        <button onClick={() => setStepUnit(0.0001)} className={`flex-1 py-4 text-xs font-black rounded-xl transition-all ${stepUnit === 0.0001 ? 'bg-blue-600 text-white shadow-xl scale-105' : 'text-slate-500 hover:text-slate-800'}`}>0.1mm単位</button>
                    </div>
                </div>

                {/* 精度管理ログ */}
                <div className="bg-white rounded-[3rem] shadow-sm border border-slate-200 overflow-hidden mb-12 text-left">
                    <div className="p-6 bg-slate-50 border-b flex justify-between items-center">
                        <h3 className="text-sm font-black uppercase flex items-center gap-2 text-slate-600 italic tracking-widest"><List size={22} /> 精度管理ログ</h3>
                        <div className="flex gap-3">
                            <button onClick={exportToSIMA} className="bg-blue-600 text-white p-3 rounded-2xl active:scale-90 shadow-lg flex items-center gap-1 font-black px-4"><UploadCloud size={18} />保存</button>
                            <button onClick={() => setIsImportModalOpen(true)} className="bg-blue-100 text-blue-600 p-3 rounded-2xl active:scale-90 shadow-sm"><FileUp size={20} /></button>
                            <button onClick={() => {
                                const newCol = { id: Date.now(), name: `柱-${columns.length+1}`, designX: 0, designY: 0, measuredX: 0, measuredY: 0 };
                                updateProjectData({
                                    columns: [...columns, newCol],
                                    activeColumnId: newCol.id
                                });
                            }} className="bg-slate-800 text-white p-3 rounded-2xl active:scale-90 shadow-lg"><Plus size={20} /></button>
                        </div>
                    </div>
                    <div className="overflow-x-auto no-scrollbar">
                        <table className="w-full text-left border-collapse">
                            <thead className="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b text-center">
                                <tr><th className="p-5 text-left">点名</th><th className="p-5 text-left">設計座標(m)</th><th className="p-5">ズレ(mm)</th><th className="p-5"></th></tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100 text-slate-700 font-black italic">
                                {columns.map(col => {
                                    const mX = parseFloat(col.measuredX) || 0;
                                    const dX = parseFloat(col.designX) || 0;
                                    const mY = parseFloat(col.measuredY) || 0;
                                    const dY = parseFloat(col.designY) || 0;
                                    const dx = (mX - dX) * 1000;
                                    const dy = (mY - dY) * 1000;
                                    const isP = Math.abs(dx) <= perfectThreshold && Math.abs(dy) <= perfectThreshold;
                                    
                                    return (
                                        <tr key={col.id} onClick={() => setActiveColumnId(col.id)} className={`transition-all ${activeColumnId === col.id ? 'active-site-card' : ''}`}>
                                            <td className="p-5 font-black text-sm leading-tight max-w-[100px] truncate">{col.name}</td>
                                            <td className="p-3">
                                                <div className="flex flex-col gap-0.5 text-[10px] font-mono-precision opacity-60">
                                                    <div>X:{dX.toFixed(4)}</div>
                                                    <div>Y:{dY.toFixed(4)}</div>
                                                </div>
                                            </td>
                                            <td className="p-3 text-center">
                                                <div className="flex flex-col gap-0.5 text-[10px] font-black font-mono-precision">
                                                    <div className={`${Math.abs(dx) > tolerance ? 'text-red-500' : (isP ? 'text-green-600' : 'text-blue-600')}`}>
                                                        <span className="opacity-40 mr-1 italic text-[9px]">X:</span>{formatWithSign(dx, 1)}
                                                    </div>
                                                    <div className={`${Math.abs(dy) > tolerance ? 'text-red-500' : (isP ? 'text-green-600' : 'text-blue-600')}`}>
                                                        <span className="opacity-40 mr-1 italic text-[9px]">Y:</span>{formatWithSign(dy, 1)}
                                                    </div>
                                                </div>
                                            </td>
                                            <td className="p-4 text-right pr-4">
                                                <button 
                                                    onClick={(e) => { 
                                                        e.stopPropagation(); 
                                                        if (columns.length > 1) {
                                                            const newCols = columns.filter(c => c.id !== col.id);
                                                            updateProjectData({
                                                                columns: newCols,
                                                                activeColumnId: activeColumnId === col.id ? newCols[0].id : activeColumnId
                                                            });
                                                        }
                                                    }} 
                                                    className="text-slate-300 hover:text-red-600 active:text-red-600 transition-all p-3 btn-touch rounded-full"
                                                >
                                                    <Trash2 size={22}/>
                                                </button>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>

            {/* SIMAインポートモーダル */}
            {isImportModalOpen && (
                <div className="fixed inset-0 z-50 bg-slate-900/90 backdrop-blur-md flex items-center justify-center p-4 text-center">
                    <div className="bg-white w-full max-w-sm rounded-[3rem] shadow-2xl p-10 relative">
                        <button onClick={() => setIsImportModalOpen(false)} className="absolute top-6 right-6 text-slate-400 p-2 font-black"><X size={28}/></button>
                        <div className="mb-10 text-slate-800 font-black italic">
                            <h2 className="uppercase text-lg tracking-widest flex items-center justify-center gap-2"><FileUp className="text-blue-600" /> SIMAデータ読込</h2>
                        </div>
                        <div onClick={() => fileInputRef.current.click()} className="border-4 border-dashed border-slate-200 rounded-[2.5rem] p-16 flex flex-col items-center justify-center gap-8 bg-slate-50 active:bg-slate-100 transition-all cursor-pointer group shadow-inner">
                            <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" accept="*" />
                            <UploadCloud size={80} className="text-slate-300 group-hover:text-blue-500 transition-colors" />
                            <p className="text-sm font-black text-slate-400 uppercase tracking-widest">ファイルを指定</p>
                        </div>
                        <div className="mt-12 flex gap-4 font-black">
                            <button onClick={() => setIsImportModalOpen(false)} className="flex-1 bg-slate-100 text-slate-400 p-6 rounded-[2rem] text-sm uppercase italic active:bg-slate-200">戻る</button>
                            <button onClick={handleImport} disabled={!importText} className={`flex-[2] p-6 rounded-[2rem] text-sm uppercase tracking-widest font-black shadow-xl transition-all ${importText ? 'bg-blue-600 text-white shadow-blue-500/40 active:scale-95' : 'bg-slate-200 text-slate-300'}`}>リスト展開</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default App;