// @ts-check
import { test, expect } from '@playwright/test';
import { loadTestUser } from '../utils/testUser.js';

test.describe('@p1 Milestones — create (modal), edit, delete', () => {
  test.setTimeout(60000);

  test('ensure scenario, open Milestones, add + edit + delete', async ({ page }) => {
    const u = loadTestUser();
    await page.route('**/api/premium/subscription/status', async route => {
      await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ is_premium: 1, is_pro_premium: 0 }) });
    });

    await page.context().clearCookies();
    await page.goto('/signin', { waitUntil: 'networkidle' });
    await page.getByPlaceholder('Username', { exact: true }).fill(u.username);
    await page.getByPlaceholder('Password', { exact: true }).fill(u.password);
    await page.getByRole('button', { name: /^Sign In$/ }).click();
    await page.waitForURL('**/signin-landing**', { timeout: 15000 });

    const scen = await page.request.post('/api/premium/career-profile', {
      data: { career_name: 'QA Milestones', status: 'planned', start_date: '2025-09-01' }
    });
    const { career_profile_id } = await scen.json();

    await page.goto(`/career-roadmap/${career_profile_id}`, { waitUntil: 'networkidle' });
    // Milestones section anchor
    await expect(page.getByRole('heading', { name: /^Milestones$/ })).toBeVisible({ timeout: 20000 });

    // Open MilestoneEditModal via "Add Details" (missing banner) or panel button
    const addDetails = page.getByRole('button', { name: /Add Details/i });
    if (await addDetails.isVisible().catch(() => false)) {
      await addDetails.click();
    } else {
      // Fallback: open the modal through any visible “Milestones” action button
      const anyBtn = page.getByRole('button', { name: /Add|Edit|Milestone/i }).first();
      await anyBtn.click().catch(() => {});
    }

    // Modal header
    await expect(page.getByRole('heading', { name: /^Milestones$/ })).toBeVisible({ timeout: 15000 });

    // Add new milestone section
    await page.getByText(/Add new milestone/i).click();
    await page.getByLabel(/^Title$/i).first().fill('QA Milestone A');
    await page.getByLabel(/^Date$/i).first().fill('2026-04-01');
    await page.getByRole('button', { name: /\+ Add impact/i }).click();
    await page.getByLabel(/^Type$/i).first().selectOption('ONE_TIME');
    await page.getByLabel(/^Amount$/i).first().fill('123');
    await page.getByLabel(/^Start$/i).first().fill('2026-03-01');
    await page.getByRole('button', { name: /\+ Add task/i }).click();
    await page.getByLabel(/^Title$/i).nth(1).fill('Prepare docs');
    await page.getByLabel(/^Due Date$/i).first().fill('2026-03-15');

    await page.getByRole('button', { name: /Save milestone/i }).click();
    await expect(page.getByText(/QA Milestone A/i)).toBeVisible({ timeout: 20000 });

    // Edit existing milestone: open accordion by its title
    await page.getByRole('button', { name: /QA Milestone A/i }).click();
    await page.getByLabel(/Description/i).fill('Short description');
    await page.getByRole('button', { name: /^Save$/ }).click();

    // Delete milestone
    await page.getByRole('button', { name: /Delete milestone/i }).click();
    // Close modal
    await page.getByRole('button', { name: /^Close$/ }).click();
  });
});