<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>서명 완료 - SAM E-Sign</title>
    @vite(['resources/css/app.css'])
</head>
<body class="bg-gray-50 min-h-screen">
<div id="esign-done-root" data-token="{{ $token }}"></div>

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;

const TOKEN = document.getElementById('esign-done-root')?.dataset.token;

const App = () => {
    const [contract, setContract] = useState(null);
    const [signer, setSigner] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        (async () => {
            try {
                const res = await fetch(`/esign/sign/${TOKEN}/api/contract`, {
                    headers: { 'Accept': 'application/json' },
                });
                const json = await res.json();
                if (json.success) {
                    setContract(json.data.contract);
                    setSigner(json.data.signer);
                }
            } catch (e) { /* ignore */ }
            setLoading(false);
        })();
    }, []);

    if (loading) return <div className="flex items-center justify-center min-h-screen"><p className="text-gray-400">로딩 중...</p></div>;

    const isSigned = signer?.status === 'signed';
    const isRejected = signer?.status === 'rejected';
    const isCompleted = contract?.status === 'completed';

    return (
        <div className="flex items-center justify-center min-h-screen p-4">
            <div className="w-full max-w-md text-center">
                <div className="mb-8">
                    <h1 className="text-2xl font-bold text-gray-900">SAM E-Sign</h1>
                </div>

                <div className="bg-white rounded-xl shadow-sm border p-8">
                    {isSigned && (
                        <>
                            <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg className="w-10 h-10 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <h2 className="text-xl font-bold text-gray-900 mb-2">서명이 완료되었습니다</h2>
                            <p className="text-gray-500 mb-6">
                                {isCompleted
                                    ? '모든 서명자의 서명이 완료되어 계약이 체결되었습니다.'
                                    : '서명이 정상적으로 접수되었습니다. 다른 서명자의 서명이 완료되면 알려드리겠습니다.'
                                }
                            </p>
                        </>
                    )}

                    {isRejected && (
                        <>
                            <div className="w-20 h-20 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg className="w-10 h-10 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </div>
                            <h2 className="text-xl font-bold text-gray-900 mb-2">서명이 거절되었습니다</h2>
                            <p className="text-gray-500 mb-6">서명 거절이 접수되었습니다. 계약 담당자에게 알림이 발송됩니다.</p>
                        </>
                    )}

                    {!isSigned && !isRejected && (
                        <>
                            <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg className="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <h2 className="text-xl font-bold text-gray-900 mb-2">처리 완료</h2>
                            <p className="text-gray-500 mb-6">요청이 처리되었습니다.</p>
                        </>
                    )}

                    <div className="bg-gray-50 rounded-lg p-4 text-left text-sm">
                        <div className="flex justify-between mb-2">
                            <span className="text-gray-500">계약</span>
                            <span className="font-medium">{contract?.title || '-'}</span>
                        </div>
                        <div className="flex justify-between mb-2">
                            <span className="text-gray-500">서명자</span>
                            <span className="font-medium">{signer?.name || '-'}</span>
                        </div>
                        {signer?.signed_at && (
                            <div className="flex justify-between">
                                <span className="text-gray-500">서명일시</span>
                                <span className="font-medium">{signer.signed_at?.slice(0,16).replace('T', ' ')}</span>
                            </div>
                        )}
                    </div>
                </div>

                <p className="text-xs text-gray-400 mt-6">
                    SAM E-Sign
                </p>
            </div>
        </div>
    );
};

ReactDOM.createRoot(document.getElementById('esign-done-root')).render(<App />);
</script>
</body>
</html>
