<!DOCTYPE html>
<html lang="mk" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SynergyMed - Интеракции на лекови</title>

    <!-- Header styles (новата синтакса со ~{}) -->
    <th:block th:replace="~{fragments/header :: headerStyles}"></th:block>

    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #a4ecba 0%, #f7f7f8 100%);
            min-height:100vh;
        }

        /* Page-level override to keep the global header flat and sticky at the top */
        .site-header {
            position: sticky;
            top: 0; left: 0; right: 0; width: 100%;
            border-radius: 0;
            margin: 0;
            z-index: 1000;
            background: white !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* Layout */
        .container { max-width:1200px; margin:0 auto; padding:20px; }

        /* Page header card (not the global site-header) */
        .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
        .header-content { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:30px; text-align:center; }
        .header-content h1 { font-size:2.5rem; font-weight:300; margin-bottom:10px; }
        .header-content p { font-size:1.1rem; opacity:.9; }

        /* Header action area */
        .header-buttons {
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            justify-content:center;
            margin-top:14px;
        }

        /* Button styles (anchor-as-button) */
        .btn {
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:12px 18px;
            border-radius:12px;
            border:2px solid #20b2aa;
            background:#fff;
            color:#20b2aa;
            text-decoration:none;
            font-weight:600;
            cursor:pointer;
            transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
        }
        .btn:hover { box-shadow:0 6px 14px rgba(32,178,170,.18); transform:translateY(-1px); }
        .btn:focus-visible { outline:3px solid rgba(32,178,170,.35); outline-offset:2px; }

        .btn-primary {
            background:linear-gradient(135deg,#20b2aa,#48d1cc);
            color:#fff;
            border:none;
            box-shadow:0 10px 20px rgba(32,178,170,.25);
        }
        .btn-primary:hover { box-shadow:0 14px 24px rgba(32,178,170,.30); }
        .btn-primary:active { transform:translateY(0); }

        /* Top nav under the page header card */
        .nav-bar { background:white; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,.1); margin-bottom:30px; padding:20px 30px; }
        .nav-links { display:flex; gap:20px; align-items:center; flex-wrap:nowrap; overflow-x:auto; }
        .nav-link { color:#20b2aa; text-decoration:none; padding:10px 20px; border-radius:25px; transition:all .3s ease; font-weight:500; }
        .nav-link:hover, .nav-link.active { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; }
        .back-btn { margin-left:auto; background:linear-gradient(135deg,#6c757d,#495057); color:white; }

        /* Cards */
        .card { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); overflow:hidden; margin-bottom:30px; }
        .card-header { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:25px 30px; font-size:1.3rem; font-weight:600; }
        .card-body { padding:30px; }

        /* Form */
        .form-group { margin-bottom:25px; }
        .form-control { width:100%; padding:15px 20px; border:2px solid #e1e5e9; border-radius:12px; font-size:1rem; transition:all .3s ease; background:#f8f9fa; }
        .form-control:focus { outline:none; border-color:#20b2aa; background:white; box-shadow:0 0 0 3px rgba(32,178,170,.1); }

        .btn-submit { padding:15px 30px; background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; border:none; border-radius:12px; font-size:1rem; font-weight:600; cursor:pointer; transition:all .3s ease; text-transform:uppercase; letter-spacing:1px; }
        .btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(32,178,170,.3); }
        .btn-submit:active { transform:translateY(0); }

        .search-form { display:flex; gap:15px; align-items:flex-end; }
        .search-input { flex:1; }

        /* Medicines grid */
        .medicine-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
        .medicine-card { background:white; border-radius:15px; padding:20px; border:2px solid #e1e5e9; transition:all .3s ease; }
        .medicine-card:hover { transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,0.1); border-color:#20b2aa; }

        .medicine-name { font-weight:600; color:#333; margin-bottom:8px; font-size:1.2rem; }
        .medicine-ingredient { color:#666; font-size:0.9rem; margin-bottom:15px; font-style:italic; }

        .check-interactions-btn {
            width:100%;
            padding:12px;
            background:linear-gradient(135deg,#20b2aa,#48d1cc);
            color:white;
            border:none;
            border-radius:10px;
            font-weight:600;
            cursor:pointer;
            transition:all .3с ease;
            text-decoration:none;
            display:block;
            text-align:center;
        }
        .check-interactions-btn:hover { color:white; transform:translateY(-2px); box-shadow:0 8px 20px rgba(32,178,170,.3); }

        /* Interaction list */
        .interaction-item { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:15px; border-left:4px solid #20b2aa; position:relative; }
        .interaction-medicines { font-weight:600; color:#333; margin-bottom:8px; font-size:1.1rem; }
        .interaction-type { color:#20b2aa; font-weight:600; margin-bottom:8px; font-size:0.9rem; text-transform:uppercase; }
        .interaction-description { color:#666; font-size:0.9rem; line-height:1.5; }

        .severity-badge { position:absolute; top:15px; right:15px; padding:4px 12px; border-radius:15px; font-size:.8rem; font-weight:600; text-transform:uppercase; }
        .severity-badge.high { background:#fee; color:#c33; }
        .severity-badge.medium { background:#fff3cd; color:#856404; }
        .severity-badge.low { background:#d1ecf1; color:#0c5460; }

        .severity-high { border-left-color:#c33; }
        .severity-medium { border-left-color:#856404; }
        .severity-low { border-left-color:#0c5460; }

        /* Alerts */
        .alert { padding:15px; border-radius:12px; margin-bottom:20px; font-size:.9rem; }
        .alert-danger { background-color:#fee; color:#c33; border:1px solid #fcc; }
        .alert-success { background-color:#efe; color:#363; border:1px solid #cfc; }
        .alert-info { background-color:#d1ecf1; color:#0c5460; border:1px solid #b6d4da; }

        .no-interactions { text-align:center; color:#888; font-style:italic; padding:40px 20px; }
        .no-interactions i { font-size:3rem; margin-bottom:15px; opacity:0.5; }

        .current-results { background:#f8f9fa; border-radius:15px; padding:20px; margin-bottom:20px; }
        .current-results h3 { color:#333; margin-bottom:15px; font-size:1.1rem; }

        @media (max-width:768px) {
            .medicine-grid { grid-template-columns:1fr; }
            .search-form { flex-direction:column; }
            .search-input { margin-bottom:15px; }
            .header-content h1 { font-size:2rem; }
            .nav-links { flex-wrap:wrap; }
        }
    </style>
</head>
<body>

<!-- Global header -->
<th:block th:replace="~{fragments/header :: siteHeader(${null})}"></th:block>

<div class="container">
    <!-- Header -->
    <div class="header">
        <div class="header-content">
            <h1>Интеракции на лекови</h1>
            <p>Проверете можни интеракции меѓу лекови за безбедни комбинации на терапија</p>
            <div class="header-buttons">
                <a class="btn btn-primary" th:href="@{/pharmacist/medicine/interactions/add}">Креирај</a>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="nav-bar">
        <div class="nav-links">
            <a href="#"   th:href="@{/pharmacist/health-profile/create}" class="nav-link">Здравствени профили</a>
            <a href="#"  th:href="@{/pharmacist/verification}" class="nav-link">Верификација на профили</a>
            <a href="#" th:href="@{/pharmacist/supply-orders}"  class="nav-link">Нарачка на роба</a>
            <a href="#" th:href="@{/pharmacist/medicine/interactions}" class="nav-link active">Интеракции на лекови</a>
            <a href="#" class="nav-link back-btn" th:href="@{/profile}">Назад кон профилот</a>
        </div>
    </div>

    <!-- Alerts -->
    <div th:if="${hasError}" class="alert alert-danger">
        <span th:text="${error}">Порака за грешка</span>
    </div>

    <div th:if="${hasInfo}" class="alert alert-info">
        <span th:text="${info}">Информативна порака</span>
    </div>

    <div th:if="${hasSuccess}" class="alert alert-success">
        <span th:text="${success}">Порака за успех</span>
    </div>

    <!-- Search -->
    <div class="card">
        <div class="card-header">Пребарај интеракции на лекови</div>
        <div class="card-body">
            <form th:action="@{/pharmacist/medicine/interactions/search}" method="post" class="search-form">
                <div class="form-group search-input">
                    <input type="text"
                           class="form-control"
                           name="searchTerm"
                           placeholder="Внесете име на лек за проверка на интеракции..."
                           th:value="${searchedMedicine != null ? searchedMedicine : ''}"
                           required>
                </div>
                <button type="submit" class="btn-submit">Пребарај интеракции</button>
            </form>
        </div>
    </div>

    <!-- Current results summary -->
    <div class="current-results" th:if="${searchedMedicine != null}">
        <h3 th:text="'Пребарување за: ' + ${searchedMedicine}">Пребарување: </h3>
        <p th:if="${interactions != null}"
           th:text="'Пронајдени интеракции: ' + ${#lists.size(interactions)}">Пронајдени интеракции: 0</p>
    </div>

    <!-- Interaction Results -->
    <div th:if="${interactions != null}" class="card">
        <div class="card-header">
            Резултати од интеракции
            <span th:if="${searchedMedicine != null}"
                  th:text="' — за ' + ${searchedMedicine}"></span>
        </div>

        <div class="card-body">
            <!-- No interactions -->
            <div th:if="${#lists.isEmpty(interactions)}" class="no-interactions">
                <i class="fas fa-check-circle" aria-hidden="true"></i>
                <p>Нема пронајдени ризични интеракции за ова пребарување.</p>
            </div>

            <!-- List interactions -->
            <div th:if="${!#lists.isEmpty(interactions)}">
                <div th:each="interaction : ${interactions}"
                     class="interaction-item"
                     th:classappend="${'severity-' + (#strings.toLowerCase(interaction.severity != null ? interaction.severity : 'low'))}">

                    <span class="severity-badge"
                          th:classappend="${#strings.toLowerCase(interaction.severity != null ? interaction.severity : 'low')}"
                          th:text="${interaction.severity != null ? interaction.severity : 'LOW'}">LOW</span>

                    <!-- Medicine names -->
                    <div class="interaction-medicines"
                         th:text="${
                            ((interaction.medicineId1 != null and interaction.medicineId1.medicineName != null)
                                ? interaction.medicineId1.medicineName : 'Лек A')
                            + ' + ' +
                            ((interaction.medicineId2 != null and interaction.medicineId2.medicineName != null)
                                ? interaction.medicineId2.medicineName : 'Лек B')
                         }">Лек A + Лек B</div>

                    <!-- Type -->
                    <div class="interaction-type"
                         th:text="${interaction.type != null ? interaction.type : 'Интеракција'}">Интеракција</div>

                    <!-- Description -->
                    <div class="interaction-description"
                         th:text="${interaction.description ?: 'Нема детален опис.'}">Описание…</div>
                </div>
            </div>
        </div>
    </div>

    <!-- All medicines -->
    <div th:if="${medicineList != null and !#lists.isEmpty(medicineList)}" class="card">
        <div class="card-header">Сите лекови - кликнете за проверка на интеракции</div>
        <div class="card-body">
            <div class="medicine-grid">
                <div class="medicine-card" th:each="m : ${medicineList}">
                    <div class="medicine-name" th:text="${m.medicineName}">Име на лек</div>
                    <div class="medicine-ingredient" th:text="${m.activeIngredient}">Активна состојка</div>
                    <a th:href="@{'/pharmacist/medicine/interactions/' + ${m.id}}"
                       class="check-interactions-btn">Провери интеракции</a>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Optional: include header dropdown script from the fragment -->
<th:block th:replace="~{fragments/header :: headerScripts}"></th:block>
</body>
</html>
