@page "/marketing/content"
@layout MarketingLayout
@inherits MarketingBase

@*
    EN: AI Content Studio — Generate and schedule content with Google Gemini AI.
    VI: AI Content Studio — Tạo và lên lịch nội dung với Google Gemini AI.
    Design: pencil-design/src/pages/tMarketing/desktop/ai-content-studio.pen
*@

<PageTitle>AI Content Studio — tMarketing</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="mkt-topbar">
    <div class="mkt-topbar__left">
        <h1 class="mkt-topbar__title">AI CONTENT STUDIO</h1>
        <p class="mkt-topbar__subtitle">Generate content with Google Gemini AI</p>
    </div>
    <div class="mkt-topbar__right">
        <button class="mkt-btn-ghost">
            <i data-lucide="file-text"></i>
            <span>DRAFTS</span>
        </button>
        <button class="mkt-btn-primary">
            <i data-lucide="calendar"></i>
            <span>SCHEDULE</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="mkt-content-split" style="display:flex;gap:0;flex:1;min-height:0;padding:0 28px 28px;">
    @* ── LEFT: Calendar + Upcoming ── *@
    <div style="flex:1;display:flex;flex-direction:column;gap:20px;padding-right:20px;">
        @* Content Calendar *@
        <div class="mkt-panel">
            <div class="mkt-panel__header">
                <h3 class="mkt-panel__title">
                    <i data-lucide="calendar"></i>
                    CONTENT CALENDAR
                </h3>
                <span style="font-size:12px;font-weight:600;color:var(--mkt-text-primary);letter-spacing:0.5px;">FEBRUARY 2026</span>
            </div>
            <div class="mkt-panel__body">
                @* Calendar grid *@
                <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center;">
                    @* Day headers *@
                    @foreach (var day in new[] { "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT" })
                    {
                        <div style="padding:8px 4px;font-size:10px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;">@day</div>
                    }
                    @* Calendar days *@
                    @for (int i = 0; i < 35; i++)
                    {
                        var dayNum = i - 0 + 1; // Starting from day 1
                        if (dayNum < 1 || dayNum > 28)
                        {
                            <div style="padding:8px 4px;"></div>
                        }
                        else
                        {
                            var hasEvent = _calendarEvents.ContainsKey(dayNum);
                            <div style="padding:6px 4px;border-radius:4px;cursor:pointer;@(hasEvent ? "background:var(--mkt-yellow-dim);" : "")">
                                <span style="font-size:12px;color:var(--mkt-text-primary);">@dayNum</span>
                                @if (hasEvent)
                                {
                                    <div style="font-size:8px;color:var(--mkt-yellow-primary);margin-top:2px;">@_calendarEvents[dayNum]</div>
                                }
                            </div>
                        }
                    }
                </div>
            </div>
        </div>

        @* Upcoming Posts *@
        <div class="mkt-panel" style="flex:1;">
            <div class="mkt-panel__header">
                <h3 class="mkt-panel__title">
                    <i data-lucide="clock"></i>
                    UPCOMING POSTS
                </h3>
            </div>
            <div class="mkt-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @foreach (var post in _upcomingPosts)
                {
                    <div style="display:flex;gap:12px;align-items:center;padding:10px;border-radius:6px;background:var(--mkt-bg-page);">
                        <div style="display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:6px;background:var(--mkt-yellow-dim);">
                            <span style="font-size:18px;font-weight:700;color:var(--mkt-yellow-primary);">@post.Day</span>
                            <span style="font-size:10px;color:var(--mkt-text-tertiary);">@post.Month</span>
                        </div>
                        <div style="flex:1;display:flex;flex-direction:column;gap:2px;">
                            <span style="font-size:13px;font-weight:600;color:var(--mkt-text-primary);">@post.Title</span>
                            <span style="font-size:11px;color:var(--mkt-text-secondary);">@post.Channels</span>
                        </div>
                        <span style="font-size:11px;color:var(--mkt-text-tertiary);">@post.Time</span>
                    </div>
                }
            </div>
        </div>
    </div>

    @* ── RIGHT: AI Generation Panel ── *@
    <div style="width:380px;background:var(--mkt-bg-card);border-radius:10px;display:flex;flex-direction:column;">
        @* Header *@
        <div style="padding:16px 20px;border-bottom:1px solid var(--mkt-border);display:flex;align-items:center;gap:8px;">
            <i data-lucide="sparkles" style="width:16px;height:16px;color:var(--mkt-yellow-primary);"></i>
            <span style="font-size:13px;font-weight:700;color:var(--mkt-text-primary);letter-spacing:0.5px;">AI GENERATION</span>
        </div>

        @* Form *@
        <div style="padding:16px 20px;display:flex;flex-direction:column;gap:16px;flex:1;">
            <div>
                <label style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;display:block;margin-bottom:6px;">PROMPT</label>
                <div style="padding:10px;background:var(--mkt-bg-page);border-radius:6px;min-height:80px;">
                    <textarea placeholder="Describe the content you want to create..." style="width:100%;background:none;border:none;outline:none;color:var(--mkt-text-primary);font-size:12px;font-family:var(--mkt-font);resize:none;min-height:60px;"></textarea>
                </div>
            </div>

            <div>
                <label style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;display:block;margin-bottom:6px;">STYLE</label>
                <div style="display:flex;gap:6px;">
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;">Professional</button>
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;background:var(--mkt-yellow-dim);color:var(--mkt-yellow-primary);border-color:var(--mkt-yellow-primary);">Casual</button>
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;">Fun</button>
                </div>
            </div>

            <div>
                <label style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;display:block;margin-bottom:6px;">OUTPUT</label>
                <div style="display:flex;gap:6px;">
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;background:var(--mkt-yellow-dim);color:var(--mkt-yellow-primary);border-color:var(--mkt-yellow-primary);">Post</button>
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;">Story</button>
                    <button class="mkt-btn-ghost" style="flex:1;justify-content:center;">Ad</button>
                </div>
            </div>

            @* Preview *@
            <div style="flex:1;">
                <label style="font-size:11px;font-weight:600;color:var(--mkt-text-tertiary);letter-spacing:0.5px;display:block;margin-bottom:6px;">PREVIEW</label>
                <div style="padding:12px;background:var(--mkt-bg-page);border-radius:6px;min-height:100px;display:flex;flex-direction:column;gap:6px;">
                    <span style="font-size:12px;color:var(--mkt-text-secondary);font-style:italic;">AI-generated content will appear here...</span>
                    <span style="font-size:10px;color:var(--mkt-text-tertiary);">Powered by Google Gemini</span>
                </div>
            </div>
        </div>

        @* Generate button *@
        <div style="padding:16px 20px;">
            <button style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:#A855F7;border:none;border-radius:8px;font-size:13px;font-weight:700;color:white;cursor:pointer;letter-spacing:0.5px;">
                <i data-lucide="wand-2"></i>
                GENERATE WITH GEMINI
            </button>
        </div>
    </div>
</div>

@code {
    // EN: Demo calendar data / VI: Dữ liệu lịch demo
    private record UpcomingPost(string Day, string Month, string Title, string Channels, string Time);

    private readonly Dictionary<int, string> _calendarEvents = new()
    {
        { 6, "FB Post" },
        { 8, "IG Reel" },
        { 10, "AI Banner" },
        { 14, "Valentine" },
    };

    private readonly UpcomingPost[] _upcomingPosts = new[]
    {
        new UpcomingPost("06", "FEB", "Spring Collection Announcement", "FB • IG", "10:00 AM"),
        new UpcomingPost("10", "FEB", "AI Generated Banner", "GEMINI", "2:00 PM"),
        new UpcomingPost("14", "FEB", "Valentine's Day Special Campaign", "FB • IG • ZALO", "9:00 AM"),
    };
}
