@*
    EN: Treatment Plan — Create and manage treatment plans (phac do dieu tri) for beauty salon customers.
    VI: Phac Do Dieu Tri — Tao va quan ly phac do dieu tri cho khach hang tham my vien.
*@
@page "/pos/{ShopId:guid}/beauty/treatment-plan"
@layout PosLayout
@inherits PosBase

@* TODO: Integrate with backend API for treatment plan CRUD operations *@

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* === HEADER / TIEU DE === *@
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);flex-shrink:0;">
        <div style="display:flex;align-items:center;gap:12px;">
            <button style="background:var(--pos-bg-interactive);border:none;color:var(--pos-text-primary);
                           padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;"
                    @onclick="@(() => NavigateTo("beauty"))">
                <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i>
            </button>
            <span style="font-size:16px;font-weight:700;color:#A855F7;">
                <i data-lucide="clipboard-list" style="width:20px;height:20px;display:inline;"></i>
                Phac Do Dieu Tri
            </span>
        </div>
        <button style="background:#A855F7;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;"
                @onclick="AddSession">
            <i data-lucide="plus" style="width:14px;height:14px;display:inline;"></i> Them buoi dieu tri
        </button>
    </div>

    <div style="flex:1;display:flex;overflow:hidden;">
        @* === LEFT PANEL: Customer + Treatment Plan / PANEL TRAI: Khach hang + Phac do === *@
        <div style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;">

            @* EN: Customer info section / VI: Phan thong tin khach hang *@
            <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:16px;border:1px solid var(--pos-border-subtle);">
                <div style="font-size:14px;font-weight:700;margin-bottom:12px;color:#A855F7;">
                    <i data-lucide="user" style="width:16px;height:16px;display:inline;"></i> Thong tin khach hang
                </div>
                <div style="display:flex;gap:12px;">
                    <div style="flex:1;">
                        <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Ho ten</label>
                        <input type="text" @bind="_customerName" placeholder="Nhap ho ten khach hang"
                               style="width:100%;padding:10px;border-radius:8px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:14px;" />
                    </div>
                    <div style="flex:1;">
                        <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">So dien thoai</label>
                        <input type="tel" @bind="_customerPhone" placeholder="Nhap so dien thoai"
                               style="width:100%;padding:10px;border-radius:8px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:14px;" />
                    </div>
                </div>
            </div>

            @* EN: Treatment sessions / VI: Cac buoi dieu tri *@
            <div style="font-size:14px;font-weight:700;color:var(--pos-text-primary);">
                Ke hoach dieu tri (@_sessions.Count buoi)
            </div>

            @if (!_sessions.Any())
            {
                <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;color:var(--pos-text-tertiary);">
                    <i data-lucide="clipboard-list" style="width:40px;height:40px;margin-bottom:8px;opacity:0.3;"></i>
                    <div style="font-size:14px;">Chua co buoi dieu tri nao</div>
                    <div style="font-size:12px;">Bam "Them buoi dieu tri" de bat dau</div>
                </div>
            }

            @foreach (var (session, index) in _sessions.Select((s, i) => (s, i)))
            {
                <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:16px;border:1px solid var(--pos-border-subtle);
                            border-left:4px solid @GetStatusColor(session.Status);">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                        <span style="font-size:14px;font-weight:700;">
                            Buoi @(index + 1): @session.ServiceName
                        </span>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span style="font-size:11px;padding:4px 10px;border-radius:20px;background:@GetStatusBg(session.Status);color:@GetStatusColor(session.Status);font-weight:600;">
                                @GetStatusLabel(session.Status)
                            </span>
                            <button style="background:none;border:none;color:var(--pos-danger);cursor:pointer;font-size:14px;"
                                    @onclick="() => _sessions.Remove(session)">
                                <i data-lucide="trash-2" style="width:14px;height:14px;display:inline;"></i>
                            </button>
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                        <div>
                            <label style="font-size:11px;color:var(--pos-text-tertiary);display:block;margin-bottom:2px;">Ngay dieu tri</label>
                            <input type="date" @bind="session.Date"
                                   style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;" />
                        </div>
                        <div>
                            <label style="font-size:11px;color:var(--pos-text-tertiary);display:block;margin-bottom:2px;">Bac si / Chuyen gia</label>
                            <input type="text" @bind="session.DoctorName" placeholder="Ten bac si"
                                   style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;" />
                        </div>
                        <div style="grid-column:span 2;">
                            <label style="font-size:11px;color:var(--pos-text-tertiary);display:block;margin-bottom:2px;">Ghi chu</label>
                            <textarea @bind="session.Notes" placeholder="Ghi chu cho buoi dieu tri nay..."
                                      style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:13px;min-height:60px;resize:vertical;"></textarea>
                        </div>
                        <div style="grid-column:span 2;display:flex;gap:8px;">
                            <button style="padding:6px 12px;border-radius:6px;border:1px solid var(--pos-border-default);background:var(--pos-bg-interactive);color:var(--pos-text-primary);cursor:pointer;font-size:12px;"
                                    @onclick="() => SetSessionStatus(session, StatusPlanned)">Ke hoach</button>
                            <button style="padding:6px 12px;border-radius:6px;border:1px solid #A855F7;background:rgba(168,85,247,0.1);color:#A855F7;cursor:pointer;font-size:12px;"
                                    @onclick="() => SetSessionStatus(session, StatusInProgress)">Dang thuc hien</button>
                            <button style="padding:6px 12px;border-radius:6px;border:1px solid var(--pos-success);background:rgba(34,197,94,0.1);color:var(--pos-success);cursor:pointer;font-size:12px;"
                                    @onclick="() => SetSessionStatus(session, StatusCompleted)">Hoan thanh</button>
                        </div>
                    </div>
                </div>
            }
        </div>

        @* === RIGHT PANEL: Treatment History / PANEL PHAI: Lich su dieu tri === *@
        <div style="width:360px;min-width:360px;border-left:1px solid var(--pos-border-subtle);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;">
            <div style="font-size:14px;font-weight:700;color:#A855F7;">
                <i data-lucide="history" style="width:16px;height:16px;display:inline;"></i> Lich su dieu tri
            </div>

            @if (!_sessions.Where(s => s.Status == "completed").Any())
            {
                <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;color:var(--pos-text-tertiary);">
                    <i data-lucide="clock" style="width:32px;height:32px;margin-bottom:8px;opacity:0.3;"></i>
                    <div style="font-size:13px;">Chua co lich su dieu tri</div>
                </div>
            }

            @foreach (var (session, index) in _sessions.Where(s => s.Status == "completed").Select((s, i) => (s, i)))
            {
                <div style="background:var(--pos-bg-elevated);border-radius:10px;padding:12px;border:1px solid var(--pos-border-subtle);">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <span style="font-size:13px;font-weight:600;">@session.ServiceName</span>
                        <span style="font-size:11px;color:var(--pos-success);font-weight:600;">Hoan thanh</span>
                    </div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);">
                        <div><i data-lucide="calendar" style="width:11px;height:11px;display:inline;"></i> @session.Date.ToString("dd/MM/yyyy")</div>
                        <div><i data-lucide="stethoscope" style="width:11px;height:11px;display:inline;"></i> @(string.IsNullOrEmpty(session.DoctorName) ? "Chua chi dinh" : session.DoctorName)</div>
                        @if (!string.IsNullOrEmpty(session.Notes))
                        {
                            <div style="margin-top:4px;font-style:italic;">@session.Notes</div>
                        }
                    </div>
                </div>
            }

            @* EN: Summary stats / VI: Thong ke tom tat *@
            <div style="margin-top:auto;background:var(--pos-bg-elevated);border-radius:10px;padding:12px;border:1px solid var(--pos-border-subtle);">
                <div style="font-size:12px;font-weight:600;margin-bottom:8px;">Tong quan</div>
                <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--pos-text-secondary);margin-bottom:4px;">
                    <span>Tong buoi</span>
                    <span style="font-weight:600;">@_sessions.Count</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--pos-success);margin-bottom:4px;">
                    <span>Hoan thanh</span>
                    <span style="font-weight:600;">@_sessions.Count(s => s.Status == "completed")</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:12px;color:#A855F7;margin-bottom:4px;">
                    <span>Dang thuc hien</span>
                    <span style="font-weight:600;">@_sessions.Count(s => s.Status == "in-progress")</span>
                </div>
                <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--pos-text-tertiary);">
                    <span>Ke hoach</span>
                    <span style="font-weight:600;">@_sessions.Count(s => s.Status == "planned")</span>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    // TODO: Replace local state with API calls when backend treatment plan endpoints are available

    private const string StatusPlanned = "planned";
    private const string StatusInProgress = "in-progress";
    private const string StatusCompleted = "completed";

    private void SetSessionStatus(TreatmentSession session, string status) { session.Status = status; }

    private string _customerName = "";
    private string _customerPhone = "";

    private readonly List<TreatmentSession> _sessions = new();

    private void AddSession()
    {
        _sessions.Add(new TreatmentSession
        {
            ServiceName = "Dich vu moi",
            Date = DateTime.Today.AddDays(_sessions.Count * 14),
            DoctorName = "",
            Notes = "",
            Status = "planned"
        });
    }

    private static string GetStatusColor(string status) => status switch
    {
        "completed" => "#22C55E",
        "in-progress" => "#A855F7",
        "planned" => "#94A3B8",
        _ => "#94A3B8"
    };

    private static string GetStatusBg(string status) => status switch
    {
        "completed" => "rgba(34,197,94,0.1)",
        "in-progress" => "rgba(168,85,247,0.1)",
        "planned" => "rgba(148,163,184,0.1)",
        _ => "rgba(148,163,184,0.1)"
    };

    private static string GetStatusLabel(string status) => status switch
    {
        "completed" => "Hoan thanh",
        "in-progress" => "Dang thuc hien",
        "planned" => "Ke hoach",
        _ => "Ke hoach"
    };

    private class TreatmentSession
    {
        public string ServiceName { get; set; } = "";
        public DateTime Date { get; set; } = DateTime.Today;
        public string DoctorName { get; set; } = "";
        public string Notes { get; set; } = "";
        public string Status { get; set; } = "planned";
    }
}
