import React, { useState, useEffect, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
import L from 'leaflet';
import {
    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
    ResponsiveContainer, Cell,
} from 'recharts';
import { apiGet, apiPost, apiPut, apiDelete } from '../../api';
import 'leaflet/dist/leaflet.css';
import './RealEstate.css';

// ── 샘플 데이터 ────────────────────────────────────────────────────────────────
const SAMPLE_COMPLEXES = [
    {
        id: 1,
        name: '래미안 원베일리',
        address: '서울 서초구 반포동',
        lat: 37.5065,
        lng: 126.9942,
        units: 2990,
        types: ['59㎡', '84㎡', '114㎡'],
        avgPricePerPyeong: 9500,
        subscriptionStart: '2024-01-08',
        subscriptionEnd: '2024-01-10',
        resultDate: '2024-01-15',
        status: '완료',
        priority: 'high',
        tags: ['강남권', '한강뷰', '역세권', '브랜드'],
        naverUrl: '',
        floorPlanUrl: '',
        memo: '반포동 재건축 단지. 경쟁률 수백대 1 예상.',
    },
    {
        id: 2,
        name: '올림픽파크 포레온',
        address: '서울 강동구 둔촌동',
        lat: 37.5284,
        lng: 127.1340,
        units: 12032,
        types: ['39㎡', '49㎡', '59㎡', '84㎡'],
        avgPricePerPyeong: 3800,
        subscriptionStart: '2022-12-05',
        subscriptionEnd: '2022-12-07',
        resultDate: '2022-12-12',
        status: '완료',
        priority: 'high',
        tags: ['대단지', '역세권', '재건축'],
        naverUrl: '',
        floorPlanUrl: '',
        memo: '역대 최대 규모 재건축 단지.',
    },
    {
        id: 3,
        name: '힐스테이트 동탄',
        address: '경기 화성시 동탄2신도시',
        lat: 37.2001,
        lng: 127.0724,
        units: 1534,
        types: ['59㎡', '74㎡', '84㎡'],
        avgPricePerPyeong: 1850,
        subscriptionStart: '2026-04-10',
        subscriptionEnd: '2026-04-12',
        resultDate: '2026-04-17',
        status: '청약예정',
        priority: 'normal',
        tags: ['동탄2', '신도시', 'SRT'],
        naverUrl: '',
        floorPlanUrl: '',
        memo: '동탄 핵심 입지. 교통 개선 기대.',
    },
    {
        id: 4,
        name: '롯데캐슬 마곡',
        address: '서울 강서구 마곡동',
        lat: 37.5626,
        lng: 126.8295,
        units: 868,
        types: ['59㎡', '84㎡'],
        avgPricePerPyeong: 4200,
        subscriptionStart: '2026-03-20',
        subscriptionEnd: '2026-03-22',
        resultDate: '2026-03-27',
        status: '청약중',
        priority: 'high',
        tags: ['마곡', '9호선', '공항철도'],
        naverUrl: '',
        floorPlanUrl: '',
        memo: '마곡 업무지구 직주근접. 강서 핵심 입지.',
    },
];

const STATUS_CONFIG = {
    '청약예정': { color: '#00d4ff', bg: 'rgba(0,212,255,0.12)' },
    '청약중':   { color: '#34d399', bg: 'rgba(52,211,153,0.12)' },
    '결과발표': { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
    '완료':     { color: '#6b7280', bg: 'rgba(107,114,128,0.10)' },
};

const PRIORITY_LABELS = { high: '★ 최우선', normal: '보통', low: '낮음' };

const EMPTY_FORM = {
    name: '', address: '', lat: '', lng: '',
    units: '', types: '', avgPricePerPyeong: '',
    subscriptionStart: '', subscriptionEnd: '', resultDate: '',
    status: '청약예정', priority: 'normal',
    tags: '', naverUrl: '', floorPlanUrl: '', memo: '',
};

const TABS = ['목록', '일정', '분석'];

// ── 유틸 함수 ──────────────────────────────────────────────────────────────────
const formatDate = (d) => {
    if (!d) return '-';
    return new Date(d).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
};

const formatPrice = (v) => {
    if (!v) return '-';
    return `${v.toLocaleString()}만원`;
};

const getDDays = (dateStr) => {
    if (!dateStr) return null;
    const target = new Date(dateStr);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    target.setHours(0, 0, 0, 0);
    const diff = Math.ceil((target - today) / (1000 * 60 * 60 * 24));
    if (diff === 0) return 'D-Day';
    if (diff > 0) return `D-${diff}`;
    return `D+${Math.abs(diff)}`;
};

const createMarkerIcon = (status, isSelected = false) => {
    const cfg = STATUS_CONFIG[status] || STATUS_CONFIG['완료'];
    const size = isSelected ? 18 : 12;
    return L.divIcon({
        className: '',
        html: `<div style="
            width:${size}px;height:${size}px;border-radius:50%;
            background:${cfg.color};
            box-shadow:0 0 ${isSelected ? 16 : 8}px ${cfg.color};
            border:2px solid rgba(255,255,255,${isSelected ? 0.6 : 0.25});
            transition:all 0.2s;
        "></div>`,
        iconSize: [size, size],
        iconAnchor: [size / 2, size / 2],
        popupAnchor: [0, -(size / 2 + 4)],
    });
};

// ── 지도 중심 이동 (react-leaflet 내부 훅) ────────────────────────────────────
const MapFlyTo = ({ position, zoom }) => {
    const map = useMap();
    useEffect(() => {
        if (position) {
            map.flyTo(position, zoom ?? 14, { duration: 1.0 });
        }
    }, [position, zoom, map]);
    return null;
};

// ── 단지 카드 ──────────────────────────────────────────────────────────────────
const ComplexCard = ({ complex, isSelected, onClick }) => {
    const cfg = STATUS_CONFIG[complex.status] || STATUS_CONFIG['완료'];
    const dday = getDDays(complex.subscriptionStart);
    const isUpcoming = complex.status === '청약예정' || complex.status === '청약중';

    return (
        <div className={`re-card ${isSelected ? 'is-selected' : ''}`} onClick={onClick}>
            <div className="re-card__top">
                <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
                    {complex.status}
                </span>
                {complex.priority === 'high' && <span className="re-priority-star">★</span>}
            </div>
            <h3 className="re-card__name">{complex.name}</h3>
            <p className="re-card__address">{complex.address}</p>
            <div className="re-card__stats">
                <span>{complex.units.toLocaleString()}세대</span>
                <span className="re-card__dot">·</span>
                <span style={{ color: '#f59e0b' }}>{formatPrice(complex.avgPricePerPyeong)}/평</span>
            </div>
            <div className="re-chip-group">
                {complex.types.map((t) => (
                    <span key={t} className="re-chip">{t}</span>
                ))}
            </div>
            {isUpcoming && dday && (
                <div className="re-card__dday" style={{ color: cfg.color }}>
                    청약 {dday}
                </div>
            )}
        </div>
    );
};

// ── 인라인 지도 + 단지 상세 패널 ──────────────────────────────────────────────
const RightPanel = ({ complexes, selectedComplex, onSelectComplex, onEdit, onDelete }) => {
    const cfg = selectedComplex
        ? STATUS_CONFIG[selectedComplex.status] || STATUS_CONFIG['완료']
        : null;

    const mapCenter = useMemo(() => {
        if (selectedComplex) return [selectedComplex.lat, selectedComplex.lng];
        if (complexes.length === 0) return [37.5665, 126.9780];
        return [
            complexes.reduce((s, c) => s + c.lat, 0) / complexes.length,
            complexes.reduce((s, c) => s + c.lng, 0) / complexes.length,
        ];
    }, []); // 초기 중심값만 계산 (flyTo로 이후 이동)

    return (
        <div className="re-right-panel">
            {/* ── 지도 ── */}
            <div className="re-panel re-panel--map">
                <div className="re-mini-map-wrap">
                    <MapContainer
                        key="inline-map"
                        center={mapCenter}
                        zoom={10}
                        className="re-map"
                        scrollWheelZoom
                        zoomControl={false}
                    >
                        <MapFlyTo
                            position={selectedComplex ? [selectedComplex.lat, selectedComplex.lng] : null}
                            zoom={14}
                        />
                        <TileLayer
                            url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
                            attribution='&copy; <a href="https://carto.com">CartoDB</a>'
                        />
                        {complexes.map((c) => (
                            <Marker
                                key={c.id}
                                position={[c.lat, c.lng]}
                                icon={createMarkerIcon(c.status, selectedComplex?.id === c.id)}
                                eventHandlers={{ click: () => onSelectComplex(c) }}
                            >
                                <Popup>
                                    <div className="re-popup">
                                        <strong>{c.name}</strong>
                                        <span>{c.address}</span>
                                        <span>{c.status} · {c.units.toLocaleString()}세대</span>
                                        <span>{formatPrice(c.avgPricePerPyeong)}/평</span>
                                    </div>
                                </Popup>
                            </Marker>
                        ))}
                    </MapContainer>
                    {selectedComplex && (
                        <div className="re-map-label">
                            <span style={{ color: cfg.color }}>●</span> {selectedComplex.name}
                        </div>
                    )}
                </div>
            </div>

            {/* ── 상세 패널 ── */}
            {selectedComplex ? (
                <div className="re-detail" key={selectedComplex.id}>
                    <div className="re-detail__header">
                        <div>
                            <span className="re-badge re-badge--lg" style={{ color: cfg.color, background: cfg.bg }}>
                                {selectedComplex.status}
                            </span>
                            <h2 className="re-detail__name">{selectedComplex.name}</h2>
                            <p className="re-detail__address">{selectedComplex.address}</p>
                        </div>
                        <div className="re-detail__header-actions">
                            <button className="button ghost small" onClick={onEdit}>편집</button>
                            <button className="button danger small" onClick={onDelete}>삭제</button>
                        </div>
                    </div>

                    <div className="re-detail__section">
                        <div className="re-detail__stats-grid">
                            <div className="re-stat">
                                <p className="re-stat__label">세대수</p>
                                <p className="re-stat__value">{selectedComplex.units.toLocaleString()}</p>
                            </div>
                            <div className="re-stat">
                                <p className="re-stat__label">평당가</p>
                                <p className="re-stat__value" style={{ color: '#f59e0b' }}>
                                    {formatPrice(selectedComplex.avgPricePerPyeong)}
                                </p>
                            </div>
                            <div className="re-stat">
                                <p className="re-stat__label">우선순위</p>
                                <p className="re-stat__value" style={{ fontSize: 13 }}>
                                    {PRIORITY_LABELS[selectedComplex.priority]}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div className="re-detail__section">
                        <p className="re-detail__section-title">평형대</p>
                        <div className="re-chip-group">
                            {selectedComplex.types.map((t) => (
                                <span key={t} className="re-chip re-chip--lg">{t}</span>
                            ))}
                        </div>
                    </div>

                    <div className="re-detail__section">
                        <p className="re-detail__section-title">청약 일정</p>
                        <div className="re-timeline">
                            <div className="re-timeline__item">
                                <div className="re-timeline__dot re-timeline__dot--start" />
                                <div>
                                    <p className="re-timeline__label">청약 시작</p>
                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionStart)}</p>
                                </div>
                            </div>
                            <div className="re-timeline__item">
                                <div className="re-timeline__dot" />
                                <div>
                                    <p className="re-timeline__label">청약 마감</p>
                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionEnd)}</p>
                                </div>
                            </div>
                            <div className="re-timeline__item">
                                <div className="re-timeline__dot re-timeline__dot--result" />
                                <div>
                                    <p className="re-timeline__label">당첨 발표</p>
                                    <p className="re-timeline__date">{formatDate(selectedComplex.resultDate)}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {selectedComplex.tags.length > 0 && (
                        <div className="re-detail__section">
                            <p className="re-detail__section-title">특징</p>
                            <div className="re-chip-group">
                                {selectedComplex.tags.map((tag) => (
                                    <span key={tag} className="re-chip re-chip--tag">{tag}</span>
                                ))}
                            </div>
                        </div>
                    )}

                    {selectedComplex.memo && (
                        <div className="re-detail__section">
                            <p className="re-detail__section-title">메모</p>
                            <p className="re-detail__memo">{selectedComplex.memo}</p>
                        </div>
                    )}

                    <div className="re-detail__actions">
                        {selectedComplex.naverUrl ? (
                            <a href={selectedComplex.naverUrl} target="_blank" rel="noreferrer" className="button primary small">
                                네이버 부동산 →
                            </a>
                        ) : (
                            <a
                                href={`https://new.land.naver.com/search?query=${encodeURIComponent(selectedComplex.name)}`}
                                target="_blank"
                                rel="noreferrer"
                                className="button ghost small"
                            >
                                네이버 검색 →
                            </a>
                        )}
                        {selectedComplex.floorPlanUrl && (
                            <a href={selectedComplex.floorPlanUrl} target="_blank" rel="noreferrer" className="button ghost small">
                                평면도 보기
                            </a>
                        )}
                    </div>
                </div>
            ) : (
                <div className="re-detail re-detail--empty">
                    <div className="re-detail__empty-icon">🏢</div>
                    <p>카드 또는 지도 마커를 클릭하면<br />단지 상세 정보가 표시됩니다</p>
                </div>
            )}
        </div>
    );
};

// ── 청약 일정 타임라인 ─────────────────────────────────────────────────────────
const ScheduleView = ({ complexes }) => {
    const events = complexes
        .filter((c) => c.subscriptionStart)
        .flatMap((c) => [
            { date: c.subscriptionStart, label: '청약 시작', complex: c, type: 'start' },
            { date: c.subscriptionEnd, label: '청약 마감', complex: c, type: 'end' },
            { date: c.resultDate, label: '당첨 발표', complex: c, type: 'result' },
        ])
        .filter((e) => e.date)
        .sort((a, b) => new Date(a.date) - new Date(b.date));

    const today = new Date();
    today.setHours(0, 0, 0, 0);

    const upcoming = events.filter((e) => new Date(e.date) >= today);
    const past = events.filter((e) => new Date(e.date) < today).reverse();

    const EventItem = ({ event }) => {
        const cfg = STATUS_CONFIG[event.complex.status] || STATUS_CONFIG['완료'];
        const dday = getDDays(event.date);
        return (
            <div className={`re-schedule-item re-schedule-item--${event.type}`}>
                <div className="re-schedule-item__date">
                    <span className="re-schedule-item__dday" style={{ color: cfg.color }}>{dday}</span>
                    <span className="re-schedule-item__datestr">{formatDate(event.date)}</span>
                </div>
                <div className="re-schedule-item__dot" style={{ background: cfg.color, boxShadow: `0 0 6px ${cfg.color}` }} />
                <div className="re-schedule-item__content">
                    <p className="re-schedule-item__complex">{event.complex.name}</p>
                    <p className="re-schedule-item__label">{event.label}</p>
                </div>
            </div>
        );
    };

    return (
        <div className="re-schedule">
            {upcoming.length > 0 && (
                <div className="re-schedule-section">
                    <h4 className="re-schedule-section__title">예정 일정</h4>
                    {upcoming.map((e, i) => <EventItem key={i} event={e} />)}
                </div>
            )}
            {past.length > 0 && (
                <div className="re-schedule-section">
                    <h4 className="re-schedule-section__title re-schedule-section__title--past">지난 일정</h4>
                    {past.map((e, i) => <EventItem key={i} event={e} />)}
                </div>
            )}
            {events.length === 0 && <p className="re-empty">등록된 청약 일정이 없습니다.</p>}
        </div>
    );
};

// ── 가격 분석 ──────────────────────────────────────────────────────────────────
const PriceAnalysis = ({ complexes }) => {
    const chartData = [...complexes]
        .filter((c) => c.avgPricePerPyeong > 0)
        .sort((a, b) => b.avgPricePerPyeong - a.avgPricePerPyeong)
        .map((c) => ({
            name: c.name.length > 9 ? c.name.slice(0, 9) + '…' : c.name,
            price: c.avgPricePerPyeong,
            status: c.status,
            fullName: c.name,
        }));

    const CustomTooltip = ({ active, payload }) => {
        if (!active || !payload?.length) return null;
        return (
            <div className="re-chart-tooltip">
                <p>{payload[0].payload.fullName}</p>
                <p className="re-chart-tooltip__value">{payload[0].value.toLocaleString()}만원/평</p>
            </div>
        );
    };

    const prices = complexes.map((c) => c.avgPricePerPyeong).filter((v) => v > 0);
    const avg = prices.length ? Math.round(prices.reduce((s, v) => s + v, 0) / prices.length) : 0;
    const max = prices.length ? Math.max(...prices) : 0;
    const min = prices.length ? Math.min(...prices) : 0;

    return (
        <div className="re-analysis">
            <div className="re-analysis__stats">
                <div className="re-stat-card">
                    <p className="re-stat-card__label">평균 평당가</p>
                    <p className="re-stat-card__value">{formatPrice(avg)}</p>
                </div>
                <div className="re-stat-card">
                    <p className="re-stat-card__label">최고 평당가</p>
                    <p className="re-stat-card__value" style={{ color: '#f59e0b' }}>{formatPrice(max)}</p>
                </div>
                <div className="re-stat-card">
                    <p className="re-stat-card__label">최저 평당가</p>
                    <p className="re-stat-card__value" style={{ color: '#34d399' }}>{formatPrice(min)}</p>
                </div>
            </div>

            <div className="re-panel">
                <div className="re-panel__head">
                    <div>
                        <p className="re-panel__eyebrow">가격 비교</p>
                        <h3>단지별 평당가</h3>
                        <p className="re-panel__sub">관심 단지의 평당 분양가를 비교합니다.</p>
                    </div>
                </div>
                <div className="re-chart-wrapper">
                    <ResponsiveContainer width="100%" height={280}>
                        <BarChart data={chartData} margin={{ top: 10, right: 20, left: 10, bottom: 50 }}>
                            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
                            <XAxis
                                dataKey="name"
                                stroke="var(--text-dim)"
                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
                                angle={-20}
                                textAnchor="end"
                                height={60}
                            />
                            <YAxis
                                stroke="var(--text-dim)"
                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
                                tickFormatter={(v) => `${(v / 1000).toFixed(1)}k`}
                                width={44}
                            />
                            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(255,255,255,0.03)' }} />
                            <Bar dataKey="price" radius={[4, 4, 0, 0]}>
                                {chartData.map((entry, index) => {
                                    const cfg = STATUS_CONFIG[entry.status] || STATUS_CONFIG['완료'];
                                    return <Cell key={index} fill={cfg.color} fillOpacity={0.75} />;
                                })}
                            </Bar>
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>

            <div className="re-panel">
                <div className="re-panel__head">
                    <div>
                        <p className="re-panel__eyebrow">비교표</p>
                        <h3>단지 상세 비교</h3>
                    </div>
                </div>
                <div className="re-table-wrapper">
                    <table className="re-table">
                        <thead>
                            <tr>
                                <th>단지명</th>
                                <th>상태</th>
                                <th>세대수</th>
                                <th>평형대</th>
                                <th>평당가</th>
                                <th>청약 시작</th>
                            </tr>
                        </thead>
                        <tbody>
                            {complexes.map((c) => {
                                const cfg = STATUS_CONFIG[c.status] || STATUS_CONFIG['완료'];
                                return (
                                    <tr key={c.id}>
                                        <td className="re-table__name">{c.name}</td>
                                        <td>
                                            <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
                                                {c.status}
                                            </span>
                                        </td>
                                        <td>{c.units.toLocaleString()}</td>
                                        <td>{c.types.join(', ')}</td>
                                        <td style={{ color: '#f59e0b', fontWeight: 600 }}>
                                            {formatPrice(c.avgPricePerPyeong)}
                                        </td>
                                        <td>{formatDate(c.subscriptionStart)}</td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

// ── 단지 추가/편집 모달 ────────────────────────────────────────────────────────
const ComplexModal = ({ complex, onClose, onSave }) => {
    const [form, setForm] = useState(
        complex
            ? {
                ...complex,
                types: complex.types.join(', '),
                tags: complex.tags.join(', '),
                lat: String(complex.lat),
                lng: String(complex.lng),
                units: String(complex.units),
                avgPricePerPyeong: String(complex.avgPricePerPyeong),
            }
            : { ...EMPTY_FORM }
    );

    const set = (field) => (e) => setForm((prev) => ({ ...prev, [field]: e.target.value }));

    const handleSubmit = (e) => {
        e.preventDefault();
        onSave({
            ...form,
            lat: parseFloat(form.lat) || 37.5665,
            lng: parseFloat(form.lng) || 126.9780,
            units: parseInt(form.units) || 0,
            avgPricePerPyeong: parseInt(form.avgPricePerPyeong) || 0,
            types: form.types.split(',').map((t) => t.trim()).filter(Boolean),
            tags: form.tags.split(',').map((t) => t.trim()).filter(Boolean),
        });
    };

    return (
        <div className="re-modal-overlay" onClick={onClose}>
            <div className="re-modal" onClick={(e) => e.stopPropagation()}>
                <div className="re-modal__header">
                    <h3>{complex ? '단지 편집' : '새 단지 추가'}</h3>
                    <button className="re-modal__close" onClick={onClose}>✕</button>
                </div>
                <form className="re-modal__form" onSubmit={handleSubmit}>
                    <div className="re-form-section">
                        <p className="re-form-section__title">기본 정보</p>
                        <div className="re-form-row">
                            <label className="re-form-label">
                                단지명 *
                                <input className="re-form-input" value={form.name} onChange={set('name')} placeholder="단지명 입력" required />
                            </label>
                            <label className="re-form-label">
                                상태
                                <select className="re-form-input" value={form.status} onChange={set('status')}>
                                    {Object.keys(STATUS_CONFIG).map((s) => (
                                        <option key={s} value={s}>{s}</option>
                                    ))}
                                </select>
                            </label>
                        </div>
                        <label className="re-form-label">
                            주소
                            <input className="re-form-input" value={form.address} onChange={set('address')} placeholder="서울 서초구 반포동" />
                        </label>
                        <div className="re-form-row">
                            <label className="re-form-label">
                                위도 (lat)
                                <input className="re-form-input" value={form.lat} onChange={set('lat')} placeholder="37.5665" type="number" step="0.0001" />
                            </label>
                            <label className="re-form-label">
                                경도 (lng)
                                <input className="re-form-input" value={form.lng} onChange={set('lng')} placeholder="126.9780" type="number" step="0.0001" />
                            </label>
                        </div>
                    </div>

                    <div className="re-form-section">
                        <p className="re-form-section__title">단지 정보</p>
                        <div className="re-form-row">
                            <label className="re-form-label">
                                세대수
                                <input className="re-form-input" value={form.units} onChange={set('units')} placeholder="2990" type="number" />
                            </label>
                            <label className="re-form-label">
                                평당가 (만원)
                                <input className="re-form-input" value={form.avgPricePerPyeong} onChange={set('avgPricePerPyeong')} placeholder="4500" type="number" />
                            </label>
                        </div>
                        <div className="re-form-row">
                            <label className="re-form-label">
                                평형대 (쉼표 구분)
                                <input className="re-form-input" value={form.types} onChange={set('types')} placeholder="59㎡, 84㎡, 114㎡" />
                            </label>
                            <label className="re-form-label">
                                우선순위
                                <select className="re-form-input" value={form.priority} onChange={set('priority')}>
                                    <option value="high">★ 최우선</option>
                                    <option value="normal">보통</option>
                                    <option value="low">낮음</option>
                                </select>
                            </label>
                        </div>
                        <label className="re-form-label">
                            특징 태그 (쉼표 구분)
                            <input className="re-form-input" value={form.tags} onChange={set('tags')} placeholder="강남권, 역세권, 브랜드" />
                        </label>
                    </div>

                    <div className="re-form-section">
                        <p className="re-form-section__title">청약 일정</p>
                        <div className="re-form-row re-form-row--three">
                            <label className="re-form-label">
                                청약 시작
                                <input className="re-form-input" type="date" value={form.subscriptionStart} onChange={set('subscriptionStart')} />
                            </label>
                            <label className="re-form-label">
                                청약 마감
                                <input className="re-form-input" type="date" value={form.subscriptionEnd} onChange={set('subscriptionEnd')} />
                            </label>
                            <label className="re-form-label">
                                당첨 발표
                                <input className="re-form-input" type="date" value={form.resultDate} onChange={set('resultDate')} />
                            </label>
                        </div>
                    </div>

                    <div className="re-form-section">
                        <p className="re-form-section__title">링크 & 메모</p>
                        <label className="re-form-label">
                            네이버 부동산 URL
                            <input className="re-form-input" value={form.naverUrl} onChange={set('naverUrl')} placeholder="https://new.land.naver.com/complexes/..." />
                        </label>
                        <label className="re-form-label">
                            평면도 URL
                            <input className="re-form-input" value={form.floorPlanUrl} onChange={set('floorPlanUrl')} placeholder="https://..." />
                        </label>
                        <label className="re-form-label">
                            메모
                            <textarea
                                className="re-form-input re-form-textarea"
                                value={form.memo}
                                onChange={set('memo')}
                                placeholder="관심 포인트, 분석 내용 등"
                                rows={3}
                            />
                        </label>
                    </div>

                    <div className="re-modal__footer">
                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
                        <button type="submit" className="button primary">{complex ? '저장' : '추가'}</button>
                    </div>
                </form>
            </div>
        </div>
    );
};

// ── 메인 컴포넌트 ──────────────────────────────────────────────────────────────
const RealEstate = () => {
    const [complexes, setComplexes] = useState(SAMPLE_COMPLEXES);
    const [selectedComplex, setSelectedComplex] = useState(null);
    const [activeTab, setActiveTab] = useState('목록');
    const [filterStatus, setFilterStatus] = useState('전체');
    const [showModal, setShowModal] = useState(false);
    const [editingComplex, setEditingComplex] = useState(null);

    useEffect(() => {
        apiGet('/api/realestate/complexes')
            .then((data) => {
                if (Array.isArray(data) && data.length > 0) setComplexes(data);
            })
            .catch(() => {});
    }, []);

    const handleAdd = async (data) => {
        const newComplex = { ...data, id: Date.now() };
        setComplexes((prev) => [...prev, newComplex]);
        setShowModal(false);
        try { await apiPost('/api/realestate/complexes', data); } catch {}
    };

    const handleUpdate = async (data) => {
        setComplexes((prev) => prev.map((c) => (c.id === data.id ? data : c)));
        if (selectedComplex?.id === data.id) setSelectedComplex(data);
        setEditingComplex(null);
        setShowModal(false);
        try { await apiPut(`/api/realestate/complexes/${data.id}`, data); } catch {}
    };

    const handleDelete = async (id) => {
        if (!confirm('삭제하시겠습니까?')) return;
        setComplexes((prev) => prev.filter((c) => c.id !== id));
        if (selectedComplex?.id === id) setSelectedComplex(null);
        try { await apiDelete(`/api/realestate/complexes/${id}`); } catch {}
    };

    const handleModalSave = (data) => {
        if (editingComplex) {
            handleUpdate({ ...editingComplex, ...data });
        } else {
            handleAdd(data);
        }
    };

    const filteredComplexes = useMemo(() => {
        if (filterStatus === '전체') return complexes;
        return complexes.filter((c) => c.status === filterStatus);
    }, [complexes, filterStatus]);

    const stats = useMemo(() => ({
        total: complexes.length,
        upcoming: complexes.filter((c) => c.status === '청약예정').length,
        active: complexes.filter((c) => c.status === '청약중').length,
        avgPrice: complexes.length
            ? Math.round(complexes.reduce((s, c) => s + c.avgPricePerPyeong, 0) / complexes.length)
            : 0,
    }), [complexes]);

    return (
        <div className="re">
            {/* 헤더 */}
            <header className="re-header">
                <div>
                    <p className="re-kicker">부동산 정보</p>
                    <h1>관심 단지 관리</h1>
                    <p className="re-sub">관심 있는 아파트 단지 정보를 수집하고 분석합니다.</p>
                    <div className="re-header-actions">
                        <button
                            className="button primary"
                            onClick={() => { setEditingComplex(null); setShowModal(true); }}
                        >
                            + 단지 추가
                        </button>
                        <Link to="/realestate" className="button ghost">← 청약 대시보드</Link>
                        <a href="https://www.applyhome.co.kr" target="_blank" rel="noreferrer" className="button ghost">
                            청약홈 →
                        </a>
                    </div>
                </div>
                <div className="re-stats-bar">
                    <div className="re-stat-item">
                        <p className="re-stat-item__value">{stats.total}</p>
                        <p className="re-stat-item__label">관심 단지</p>
                    </div>
                    <div className="re-stat-item">
                        <p className="re-stat-item__value" style={{ color: '#00d4ff' }}>{stats.upcoming}</p>
                        <p className="re-stat-item__label">청약 예정</p>
                    </div>
                    <div className="re-stat-item">
                        <p className="re-stat-item__value" style={{ color: '#34d399' }}>{stats.active}</p>
                        <p className="re-stat-item__label">청약 중</p>
                    </div>
                    <div className="re-stat-item">
                        <p className="re-stat-item__value" style={{ color: '#f59e0b' }}>
                            {stats.avgPrice.toLocaleString()}만
                        </p>
                        <p className="re-stat-item__label">평균 평당가</p>
                    </div>
                </div>
            </header>

            {/* 탭 바 */}
            <div className="re-tabs-bar">
                <div className="re-tabs">
                    {TABS.map((tab) => (
                        <button
                            key={tab}
                            className={`re-tab ${activeTab === tab ? 'is-active' : ''}`}
                            onClick={() => setActiveTab(tab)}
                        >
                            {tab}
                        </button>
                    ))}
                </div>
                {activeTab === '목록' && (
                    <div className="re-filter">
                        {['전체', ...Object.keys(STATUS_CONFIG)].map((s) => (
                            <button
                                key={s}
                                className={`re-filter-btn ${filterStatus === s ? 'is-active' : ''}`}
                                onClick={() => setFilterStatus(s)}
                            >
                                {s}
                            </button>
                        ))}
                    </div>
                )}
            </div>

            {/* 목록 탭 — 카드 + 지도/상세 */}
            {activeTab === '목록' && (
                <div className="re-list-layout">
                    <div className="re-card-grid">
                        {filteredComplexes.length === 0 ? (
                            <p className="re-empty">등록된 단지가 없습니다.</p>
                        ) : (
                            filteredComplexes.map((c) => (
                                <ComplexCard
                                    key={c.id}
                                    complex={c}
                                    isSelected={selectedComplex?.id === c.id}
                                    onClick={() => setSelectedComplex(c)}
                                />
                            ))
                        )}
                    </div>
                    <RightPanel
                        complexes={complexes}
                        selectedComplex={selectedComplex}
                        onSelectComplex={setSelectedComplex}
                        onEdit={() => { setEditingComplex(selectedComplex); setShowModal(true); }}
                        onDelete={() => handleDelete(selectedComplex.id)}
                    />
                </div>
            )}

            {activeTab === '일정' && (
                <div className="re-panel">
                    <div className="re-panel__head">
                        <div>
                            <p className="re-panel__eyebrow">캘린더</p>
                            <h3>청약 일정</h3>
                            <p className="re-panel__sub">청약 시작·마감·당첨 발표일을 타임라인으로 확인합니다.</p>
                        </div>
                    </div>
                    <ScheduleView complexes={complexes} />
                </div>
            )}

            {activeTab === '분석' && (
                <PriceAnalysis complexes={complexes} />
            )}

            {showModal && (
                <ComplexModal
                    complex={editingComplex}
                    onClose={() => { setShowModal(false); setEditingComplex(null); }}
                    onSave={handleModalSave}
                />
            )}
        </div>
    );
};

export default RealEstate;
