<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.hrs.model.entity.House, com.hrs.model.entity.User" %>
<%
    User loginUser = (User) session.getAttribute("loginUser");
    if (loginUser == null || !"0".equals(loginUser.getRoleType())) {
        response.sendRedirect(request.getContextPath() + "/user/login");
        return;
    }
    
    House house = (House) request.getAttribute("house");
    if (house == null) {
        response.sendRedirect(request.getContextPath() + "/user/house/list");
        return;
    }
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= house.getTitle() %> - 租房系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, "微软雅黑", sans-serif;
            background-color: #f5f5f5;
        }
        
        /* 头部导航 */
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .container {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .logo {
            float: left;
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav {
            float: right;
            margin-top: 5px;
        }
        
        .nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            padding: 5px 10px;
        }
        
        .nav a:hover {
            background-color: #45a049;
            border-radius: 4px;
        }
        
        .user-info {
            float: right;
            margin-right: 20px;
            font-size: 14px;
        }
        
        /* 面包屑导航 */
        .breadcrumb {
            background-color: white;
            padding: 12px 0;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .breadcrumb a {
            color: #4CAF50;
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        /* 主要内容区 */
        .main-content {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        /* 图片区域 */
        .house-images {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .main-image {
            width: 100%;
            height: 400px;
            background-color: #f0f0f0;
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .thumb-images {
            display: flex;
            gap: 10px;
            overflow-x: auto;
        }
        
        .thumb {
            width: 80px;
            height: 60px;
            background-color: #e0e0e0;
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .thumb:hover {
            border-color: #4CAF50;
        }
        
        .thumb.active {
            border-color: #4CAF50;
        }
        
        .no-image {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #999;
            font-size: 24px;
        }
        
        /* 房源信息 */
        .house-info {
            padding: 20px;
        }
        
        .house-title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        
        .price-box {
            background-color: #fff3e0;
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .price {
            font-size: 32px;
            color: #f44336;
            font-weight: bold;
        }
        
        .price span {
            font-size: 16px;
            font-weight: normal;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .info-item {
            text-align: center;
        }
        
        .info-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .section {
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 2px solid #4CAF50;
        }
        
        .facility-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .facility-item {
            background-color: #f5f5f5;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            color: #666;
        }
        
        .description {
            line-height: 1.8;
            color: #666;
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 8px;
        }
        
        /* 房东信息 */
        .landlord-card {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .landlord-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .landlord-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .landlord-avatar {
            width: 60px;
            height: 60px;
            background-color: #4CAF50;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }
        
        .landlord-details p {
            margin: 5px 0;
            color: #666;
        }
        
        /* 操作按钮 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            margin-bottom: 40px;
        }
        
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #45a049;
        }
        
        .btn-secondary {
            background-color: #ff9800;
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #fb8c00;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid #4CAF50;
            color: #4CAF50;
        }
        
        .btn-outline:hover {
            background-color: #4CAF50;
            color: white;
        }
        
        /* 页脚 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
        
        /* 消息提示 */
        .message {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 12px 20px;
            border-radius: 4px;
            color: white;
            z-index: 1000;
            animation: slideIn 0.3s ease;
        }
        
        .message-success {
            background-color: #4CAF50;
        }
        
        .message-error {
            background-color: #f44336;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <div class="container clearfix">
            <div class="logo">🏠 租房系统</div>
            <div class="user-info">
                欢迎，<%= loginUser.getRealName() %> |
                <a href="${pageContext.request.contextPath}/user/logout" style="color:white;">退出</a>
            </div>
            <div class="nav">
                <a href="${pageContext.request.contextPath}/user/house/list">首页</a>
                <a href="${pageContext.request.contextPath}/user/collection/list">我的收藏</a>
                <a href="${pageContext.request.contextPath}/user/reservation/list">我的预约</a>
                <a href="${pageContext.request.contextPath}/user/order/list">我的订单</a>
            </div>
        </div>
    </div>
    
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <a href="${pageContext.request.contextPath}/user/house/list">首页</a> &gt;
            <span><%= house.getTitle() %></span>
        </div>
        
        <div class="main-content">
            <!-- 图片区域 -->
            <div class="house-images">
                <!-- 主图 -->
                <div class="main-image" id="mainImage" 
                     style="background-image: url('${pageContext.request.contextPath}/<%= house.getFirstImage() != null ? house.getFirstImage() : "" %>');">
                    <% if (house.getFirstImage() == null) { %>
                        <div class="no-image">🏠 暂无图片</div>
                    <% } %>
                </div>
                
                <!-- 缩略图列表 -->
                <div class="thumb-images" id="thumbImages">
                    <%
                        String[] images = null;
                        if (house.getImgUrl() != null && !house.getImgUrl().isEmpty()) {
                            images = house.getImgUrl().split(",");
                            for (int i = 0; i < images.length; i++) {
                    %>
                        <div class="thumb" style="background-image: url('${pageContext.request.contextPath}/<%= images[i] %>');" 
                             onclick="changeImage('${pageContext.request.contextPath}/<%= images[i] %>', this)"></div>
                    <%
                            }
                        }
                    %>
                </div>
            </div>
            
            <!-- 房源信息 -->
            <div class="house-info">
                <div class="house-title"><%= house.getTitle() %></div>
                
                <div class="price-box">
                    <span class="price">¥<%= house.getRentPrice() %><span>/月</span></span>
                </div>
                
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">户型</div>
                        <div class="info-value"><%= house.getHouseType() != null ? house.getHouseType() : "待定" %></div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">面积</div>
                        <div class="info-value"><%= house.getArea() != null ? house.getArea() : "待定" %></div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">租赁类型</div>
                        <div class="info-value"><%= house.getRentTypeText() %></div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">房源编号</div>
                        <div class="info-value"><%= house.getHouseNo() %></div>
                    </div>
                </div>
                
                <div class="section">
                    <div class="section-title">📍 房源地址</div>
                    <p style="color: #666;"><%= house.getAddress() != null ? house.getAddress() : "暂无地址信息" %></p>
                </div>
                
                <div class="section">
                    <div class="section-title">🛋️ 配套设施</div>
                    <div class="facility-list">
                        <%
                            String facility = house.getFacility();
                            if (facility != null && !facility.isEmpty()) {
                                String[] facilities = facility.split(",");
                                for (String f : facilities) {
                        %>
                            <span class="facility-item"><%= f.trim() %></span>
                        <%
                                }
                            } else {
                        %>
                            <span class="facility-item">暂无设施信息</span>
                        <%
                            }
                        %>
                    </div>
                </div>
                
                <div class="section">
                    <div class="section-title">📝 房源描述</div>
                    <div class="description">
                        <%= house.getDescription() != null ? house.getDescription() : "暂无描述信息" %>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 房东信息 -->
        <div class="landlord-card">
            <div class="landlord-title">👤 房东信息</div>
            <div class="landlord-info">
                <div class="landlord-avatar">👨</div>
                <div class="landlord-details">
                    <p><strong><%= house.getLandlordName() != null ? house.getLandlordName() : "房东" %></strong></p>
                    <p>📞 <%= house.getLandlordPhone() != null ? house.getLandlordPhone() : "暂无联系方式" %></p>
                    <p>⭐ 认证房东 · 已发布房源</p>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
            <a href="${pageContext.request.contextPath}/user/order/create?houseId=<%= house.getId() %>" 
               class="btn btn-primary">💰 立即下单</a>
            <button class="btn btn-secondary" onclick="makeReservation()">📅 预约看房</button>
            <%
                com.hrs.service.CollectionService collectionService = new com.hrs.service.impl.CollectionServiceImpl();
                boolean isCollected = collectionService.isCollected(loginUser.getId(), house.getId());
                if (isCollected) {
            %>
                <button class="btn btn-outline" onclick="cancelCollection(<%= house.getId() %>)">❤️ 已收藏</button>
            <%
                } else {
            %>
                <button class="btn btn-outline" onclick="addToCollection()">🤍 收藏房源</button>
            <%
                }
            %>
            <a href="${pageContext.request.contextPath}/user/house/list" class="btn btn-outline">🔙 返回列表</a>
        </div>
        
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        <p>© 2026 租房系统 | 让租房更简单</p>
    </div>
    
    <script>
        // 切换主图
        function changeImage(url, element) {
            document.getElementById('mainImage').style.backgroundImage = 'url(' + url + ')';
            
            // 移除所有active类
            var thumbs = document.querySelectorAll('.thumb');
            thumbs.forEach(function(thumb) {
                thumb.classList.remove('active');
            });
            // 添加active类到当前
            element.classList.add('active');
        }
        
        // 预约看房
        function makeReservation() {
            var houseId = <%= house.getId() %>;
            // 跳转到预约页面
            window.location.href = '${pageContext.request.contextPath}/user/reservation/add?houseId=' + houseId;
        }
        
        // 收藏房源
        function addToCollection() {
            var houseId = <%= house.getId() %>;
            // 发送AJAX请求收藏
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '${pageContext.request.contextPath}/user/collection/add', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    if (result == 'success') {
                        showMessage('收藏成功！', 'success');
                        // 刷新页面更新按钮状态
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    } else if (result == 'exists') {
                        showMessage('您已经收藏过这套房源了', 'error');
                    } else {
                        showMessage('收藏失败，请稍后重试', 'error');
                    }
                }
            };
            xhr.send('houseId=' + houseId);
        }
        
        // 取消收藏
         function cancelCollection(houseId) {
            if (confirm('确定要取消收藏这套房源吗？')) {
                // 发送AJAX请求取消收藏
                var xhr = new XMLHttpRequest();
                xhr.open('GET', '${pageContext.request.contextPath}/user/collection/delete?houseId=' + houseId, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        showMessage('取消收藏成功！', 'success');
                        // 刷新页面更新按钮状态
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    } else if (xhr.readyState == 4) {
                        showMessage('取消收藏失败，请稍后重试', 'error');
                    }
                };
                xhr.send();
            }
        }
        
        // 显示提示消息
        function showMessage(msg, type) {
            var messageDiv = document.createElement('div');
            messageDiv.className = 'message message-' + type;
            messageDiv.innerHTML = msg;
            document.body.appendChild(messageDiv);
            
            setTimeout(function() {
                messageDiv.remove();
            }, 3000);
        }
        
        // 如果有缩略图，默认第一个高亮
        var firstThumb = document.querySelector('.thumb');
        if (firstThumb) {
            firstThumb.classList.add('active');
        }
    </script>
</body>
</html>