import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const TYPE_LABEL = {
    customer: '사용자',
    admin: '관리자',
    field: '현장',
};
function guessLayout(name) {
    const n = name;
    if (/대시보드|현황|KPI|분석|통계|보드|히트맵|스코어/.test(n))
        return 'dashboard';
    if (/목록|리스트|조회|紐⑸줉/.test(n))
        return 'list';
    if (/차트|그래프|추이|예측|리포트|ROI/.test(n))
        return 'chart';
    if (/등록|작성|입력|설정|수정|관리/.test(n))
        return 'form';
    if (/칸반|보드|타임라인|스프린트/.test(n))
        return 'kanban';
    return 'list';
}
const BAR_HEIGHTS = [60, 85, 45, 70, 55, 90, 40, 75];
function PhoneMockup({ screen, color }) {
    const layout = guessLayout(screen.name);
    const alpha = (a) => `${color}${Math.round(a * 255).toString(16).padStart(2, '0')}`;
    const headerBg = `linear-gradient(135deg, ${alpha(0.9)}, ${alpha(0.6)})`;
    return (_jsxs("div", { className: "phone-card", children: [_jsxs("div", { className: "phone-frame", style: { borderColor: alpha(0.4) }, children: [_jsxs("div", { className: "phone-status", children: [_jsx("span", { children: "9:41" }), _jsx("div", { className: "phone-status-icons", children: _jsxs("svg", { width: "14", height: "8", viewBox: "0 0 14 8", fill: "none", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "11", height: "7", rx: "1.5", stroke: "rgba(255,255,255,0.5)", strokeWidth: "1" }), _jsx("rect", { x: "1.5", y: "1.5", width: "7", height: "5", rx: "0.5", fill: color }), _jsx("path", { d: "M12 2.5v3", stroke: "rgba(255,255,255,0.5)", strokeWidth: "1", strokeLinecap: "round" })] }) })] }), _jsxs("div", { className: "phone-header", style: { background: headerBg }, children: [_jsx("div", { className: "phone-header-icon", style: { background: alpha(0.3) }, children: _jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", children: [_jsx("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2" }), _jsx("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })] }) }), _jsx("span", { className: "phone-header-title", children: screen.name }), _jsx("div", { className: "phone-header-action", children: _jsxs("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" })] }) })] }), _jsxs("div", { className: "phone-body", children: [layout === 'dashboard' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "phone-stat-row", children: [_jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color }, children: "24" }), _jsx("div", { className: "phone-stat-lbl", children: "\uC9C4\uD589\uC911" })] }), _jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color: '#10b981' }, children: "98%" }), _jsx("div", { className: "phone-stat-lbl", children: "\uC644\uB8CC\uC728" })] })] }), _jsxs("div", { className: "phone-stat-row", children: [_jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color: '#f59e0b' }, children: "3" }), _jsx("div", { className: "phone-stat-lbl", children: "\uACBD\uBCF4" })] }), _jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color: '#6366f1' }, children: "142" }), _jsx("div", { className: "phone-stat-lbl", children: "\uC11C\uBC84" })] })] }), _jsxs("div", { className: "phone-list-item", children: [_jsx("div", { className: "phone-list-dot", style: { background: color } }), _jsxs("div", { className: "phone-list-lines", children: [_jsx("div", { className: "phone-list-line", style: { width: '75%' } }), _jsx("div", { className: "phone-list-line", style: { width: '50%', opacity: 0.5 } })] })] })] })), layout === 'chart' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "phone-stat-row", children: [_jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color }, children: "87%" }), _jsx("div", { className: "phone-stat-lbl", children: "\uB2EC\uC131\uB960" })] }), _jsxs("div", { className: "phone-stat", children: [_jsx("div", { className: "phone-stat-val", style: { color: '#10b981' }, children: "\u219112%" }), _jsx("div", { className: "phone-stat-lbl", children: "\uC804\uC6D4\uBE44" })] })] }), _jsx("div", { className: "phone-chart", children: BAR_HEIGHTS.map((h, i) => (_jsx("div", { className: "phone-bar", style: {
                                                height: `${h}%`,
                                                background: i === 5 ? color : alpha(0.35 + (i % 3) * 0.1),
                                            } }, i))) }), _jsxs("div", { className: "phone-list-item", children: [_jsx("div", { className: "phone-list-dot", style: { background: '#10b981' } }), _jsx("div", { className: "phone-list-lines", children: _jsx("div", { className: "phone-list-line", style: { width: '80%' } }) }), _jsx("div", { className: "phone-list-badge", style: { background: alpha(0.2), color }, children: "AI" })] })] })), (layout === 'list' || layout === 'kanban') && (_jsx(_Fragment, { children: [
                                    { dot: color, w1: '80%', w2: '55%', badge: '완료', bc: '#10b981' },
                                    { dot: '#f59e0b', w1: '65%', w2: '40%', badge: '진행', bc: '#f59e0b' },
                                    { dot: '#6366f1', w1: '90%', w2: '70%', badge: '대기', bc: '#6366f1' },
                                ].map((row, i) => (_jsxs("div", { className: "phone-list-item", children: [_jsx("div", { className: "phone-list-dot", style: { background: row.dot } }), _jsxs("div", { className: "phone-list-lines", children: [_jsx("div", { className: "phone-list-line", style: { width: row.w1 } }), _jsx("div", { className: "phone-list-line", style: { width: row.w2, opacity: 0.5 } })] }), _jsx("div", { className: "phone-list-badge", style: { background: `${row.bc}22`, color: row.bc }, children: row.badge })] }, i))) })), layout === 'form' && (_jsx(_Fragment, { children: [70, 100, 85].map((w, i) => (_jsxs("div", { style: {
                                        background: 'rgba(255,255,255,0.04)',
                                        border: '1px solid rgba(255,255,255,0.08)',
                                        borderRadius: 6, padding: '5px 8px',
                                    }, children: [_jsx("div", { style: { height: 4, width: '35%', background: alpha(0.5), borderRadius: 2, marginBottom: 4 } }), _jsx("div", { style: { height: 5, width: `${w}%`, background: 'rgba(255,255,255,0.2)', borderRadius: 2 } })] }, i))) }))] }), _jsxs("div", { className: "phone-footer", children: [_jsx("div", { className: "phone-btn", style: { background: alpha(0.15), border: `1px solid ${alpha(0.3)}`, color }, children: "\uCDE8\uC18C" }), _jsx("div", { className: "phone-btn", style: { background: headerBg }, children: "\uD655\uC778" })] })] }), _jsxs("div", { className: "phone-label", children: [_jsx("span", { className: "phone-name", children: screen.name }), _jsx("span", { className: "phone-type", style: { color, borderColor: alpha(0.4) }, children: TYPE_LABEL[screen.type] || screen.type })] })] }));
}
export const MobileScreenList = ({ screens, color }) => {
    if (!screens.length) {
        return _jsx("p", { className: "mobile-empty", children: "\uBAA8\uBC14\uC77C \uC571 \uD654\uBA74\uC740 \uC900\uBE44 \uC911\uC785\uB2C8\uB2E4." });
    }
    return (_jsx("div", { className: "mobile-screen-list", children: screens.map((s) => (_jsx(PhoneMockup, { screen: s, color: color }, s.name))) }));
};
export default MobileScreenList;
