@*
    EN: Consent Form — Digital consent form before medical/cosmetic procedures at beauty salon.
    VI: Phieu Dong Y — Phieu dong y dien tu truoc khi thuc hien thu tuc y te/tham my.
*@
@page "/pos/{ShopId:guid}/beauty/consent-form"
@layout PosLayout
@inherits PosBase

@* TODO: Integrate with backend API for persisting consent forms *@

<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-check" style="width:20px;height:20px;display:inline;"></i>
                Phieu Dong Y Dieu Tri
            </span>
        </div>
    </div>

    <div style="flex:1;overflow-y:auto;padding:20px;max-width:800px;margin:0 auto;width:100%;">

        @* === SERVICE & CUSTOMER INFO / THONG TIN DICH VU & KHACH HANG === *@
        <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:20px;border:1px solid var(--pos-border-subtle);margin-bottom:20px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:16px;color:#A855F7;">
                <i data-lucide="info" style="width:16px;height:16px;display:inline;"></i> Thong tin dieu tri
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;">
                <div>
                    <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Dich vu</label>
                    <input type="text" @bind="_serviceName" placeholder="Ten dich vu"
                           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>
                    <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Khach hang</label>
                    <input type="text" @bind="_customerName" placeholder="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>
                    <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Bac si thuc hien</label>
                    <input type="text" @bind="_doctorName" placeholder="Ten bac si"
                           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>

        @* === CONSENT SECTIONS / PHAN DONG Y === *@
        <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:20px;border:1px solid var(--pos-border-subtle);margin-bottom:20px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:16px;color:#A855F7;">
                <i data-lucide="shield-check" style="width:16px;height:16px;display:inline;"></i> Cam ket dong y
            </div>

            <div style="display:flex;flex-direction:column;gap:16px;">
                @* Consent 1: Counseled about procedure *@
                <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border-radius:8px;border:1px solid var(--pos-border-subtle);background:@(_consent1 ? "rgba(168,85,247,0.05)" : "transparent");">
                    <input type="checkbox" @bind="_consent1"
                           style="width:20px;height:20px;accent-color:#A855F7;flex-shrink:0;margin-top:2px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;color:var(--pos-text-primary);">
                            Toi da duoc tu van ve quy trinh dieu tri
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                            Bac si da giai thich day du ve quy trinh, buoc thuc hien va ket qua ky vong.
                        </div>
                    </div>
                </label>

                @* Consent 2: Understand risks *@
                <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border-radius:8px;border:1px solid var(--pos-border-subtle);background:@(_consent2 ? "rgba(168,85,247,0.05)" : "transparent");">
                    <input type="checkbox" @bind="_consent2"
                           style="width:20px;height:20px;accent-color:#A855F7;flex-shrink:0;margin-top:2px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;color:var(--pos-text-primary);">
                            Toi hieu ro cac rui ro va tac dung phu
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                            Toi da duoc thong bao ve cac rui ro co the xay ra, tac dung phu va bien chung lien quan.
                        </div>
                    </div>
                </label>

                @* Consent 3: Agree to treatment *@
                <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border-radius:8px;border:1px solid var(--pos-border-subtle);background:@(_consent3 ? "rgba(168,85,247,0.05)" : "transparent");">
                    <input type="checkbox" @bind="_consent3"
                           style="width:20px;height:20px;accent-color:#A855F7;flex-shrink:0;margin-top:2px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;color:var(--pos-text-primary);">
                            Toi dong y thuc hien dieu tri
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                            Toi tu nguyen dong y thuc hien dich vu/thu thuat da duoc tu van.
                        </div>
                    </div>
                </label>

                @* Consent 4: Health info accurate *@
                <label style="display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:12px;border-radius:8px;border:1px solid var(--pos-border-subtle);background:@(_consent4 ? "rgba(168,85,247,0.05)" : "transparent");">
                    <input type="checkbox" @bind="_consent4"
                           style="width:20px;height:20px;accent-color:#A855F7;flex-shrink:0;margin-top:2px;" />
                    <div>
                        <div style="font-size:14px;font-weight:600;color:var(--pos-text-primary);">
                            Toi xac nhan thong tin suc khoe da cung cap la chinh xac
                        </div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                            Toi xac nhan tat ca thong tin y te, tien su benh, di ung da cung cap la trung thuc va day du.
                        </div>
                    </div>
                </label>
            </div>
        </div>

        @* === MEDICAL HISTORY / TIEN SU Y TE === *@
        <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:20px;border:1px solid var(--pos-border-subtle);margin-bottom:20px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:16px;color:#A855F7;">
                <i data-lucide="stethoscope" style="width:16px;height:16px;display:inline;"></i> Tien su y te
            </div>
            <div style="display:flex;flex-direction:column;gap:12px;">
                <div>
                    <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Di ung (thuoc, thuc pham, hoa chat...)</label>
                    <textarea @bind="_allergies" placeholder="Liet ke cac di ung neu co, hoac ghi 'Khong co'"
                              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;min-height:80px;resize:vertical;"></textarea>
                </div>
                <div>
                    <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Thuoc dang su dung</label>
                    <textarea @bind="_currentMedications" placeholder="Liet ke cac thuoc dang dung, hoac ghi 'Khong co'"
                              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;min-height:80px;resize:vertical;"></textarea>
                </div>
            </div>
        </div>

        @* === SIGNATURE / CHU KY === *@
        <div style="background:var(--pos-bg-elevated);border-radius:12px;padding:20px;border:1px solid var(--pos-border-subtle);margin-bottom:20px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:16px;color:#A855F7;">
                <i data-lucide="pen-tool" style="width:16px;height:16px;display:inline;"></i> Chu ky dien tu
            </div>
            <div>
                <label style="font-size:12px;color:var(--pos-text-tertiary);display:block;margin-bottom:4px;">Nhap ho ten day du de xac nhan</label>
                <input type="text" @bind="_signature" placeholder="Nhap ho ten cua ban de ky"
                       style="width:100%;padding:12px;border-radius:8px;border:2px solid @(IsSignatureValid ? "#A855F7" : "var(--pos-border-default)");background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:16px;font-style:italic;" />
            </div>
            <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:6px;">
                Ngay ky: @DateTime.Now.ToString("dd/MM/yyyy HH:mm")
            </div>
        </div>

        @* === CONFIRM BUTTON / NUT XAC NHAN === *@
        <div style="display:flex;justify-content:center;padding-bottom:20px;">
            <button style="padding:14px 48px;border-radius:12px;border:none;font-size:16px;font-weight:700;cursor:pointer;
                           background:@(CanConfirm ? "#A855F7" : "var(--pos-bg-interactive)");
                           color:@(CanConfirm ? "#fff" : "var(--pos-text-tertiary)");
                           box-shadow:@(CanConfirm ? "0 4px 20px rgba(168,85,247,0.3)" : "none");"
                    disabled="@(!CanConfirm)"
                    @onclick="ConfirmConsent">
                <i data-lucide="check-circle" style="width:20px;height:20px;display:inline;"></i>
                Xac nhan dong y
            </button>
        </div>
    </div>
</div>

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

    // EN: Service/customer/doctor info / VI: Thong tin dich vu/khach hang/bac si
    private string _serviceName = "";
    private string _customerName = "";
    private string _doctorName = "";

    // EN: Consent checkboxes / VI: Cac muc dong y
    private bool _consent1;
    private bool _consent2;
    private bool _consent3;
    private bool _consent4;

    // EN: Medical history / VI: Tien su y te
    private string _allergies = "";
    private string _currentMedications = "";

    // EN: Signature / VI: Chu ky
    private string _signature = "";

    private bool AllConsentsChecked => _consent1 && _consent2 && _consent3 && _consent4;
    private bool IsSignatureValid => !string.IsNullOrWhiteSpace(_signature);
    private bool CanConfirm => AllConsentsChecked && IsSignatureValid;

    private void ConfirmConsent()
    {
        if (!CanConfirm) return;

        // TODO: Save consent form data to backend API
        // var consentData = new { ServiceName = _serviceName, CustomerName = _customerName, ... };

        NavigateTo("beauty");
    }
}
