import { test, expect } from '@playwright/test';

test.describe('Page département', () => {
  test('/departement/75 (Paris) — métropole', async ({ page }) => {
    await page.goto('/departement/75');
    await expect(page.getByRole('heading', { name: 'Paris', exact: true })).toBeVisible();
    // Graph interactif avec onglets période
    await expect(page.getByRole('tab', { name: '7 jours' })).toBeVisible();
    await expect(page.getByRole('tab', { name: '30 jours' })).toBeVisible();
  });

  test('Onglet 24h actif si API Météo France hourly OK', async ({ page }) => {
    await page.goto('/departement/75');
    const tab24 = page.getByRole('tab', { name: '24 h' });
    // L'onglet n'apparaît que si hourly fetch a réussi → bonne sentinelle E2E que MF API marche
    await expect(tab24).toBeVisible();
    await expect(tab24).toHaveAttribute('aria-selected', 'true'); // default si dispo
    // Station label visible (preuve que stationName est résolu depuis le JSON mapping)
    await expect(page.getByText(/station PARIS-MONTSOURIS/i)).toBeVisible();
  });

  test('Tabs période changent activeselected', async ({ page }) => {
    await page.goto('/departement/75');
    const tab7 = page.getByRole('tab', { name: '7 jours' });
    const tab30 = page.getByRole('tab', { name: '30 jours' });
    await tab30.click();
    await expect(tab30).toHaveAttribute('aria-selected', 'true');
    await expect(tab7).toHaveAttribute('aria-selected', 'false');
  });

  test('/departement/971 (Guadeloupe) — DROM affiche notice', async ({ page }) => {
    await page.goto('/departement/971');
    await expect(page.getByRole('heading', { name: 'Guadeloupe' })).toBeVisible();
    await expect(page.getByText(/Vigilance Outre-mer non couverte/i)).toBeVisible();
  });

  test('Page dept invalide retourne 404', async ({ page }) => {
    const res = await page.goto('/departement/999');
    expect(res?.status()).toBe(404);
  });
});