import { test, expect } from '@playwright/test';
import type { Product } from '../../types';
import { setupOrderAdminMocks } from './helpers';

const VARIANT_PRODUCT: Product = {
  id: 'variant-1',
  name: 'Gin Atlas 2',
  price: 4200,
  salePrice: 3990,
  category: 'VARJOLIITIMET',
  subcategory: 'EN-B Varjoliitimet',
  shortDescription: 'Sporttinen ja luotettava siipi etenijälle.',
  description: 'Gin Atlas 2 tarjoaa vakautta ja suorituskykyä pitkille lennoille.',
  images: ['/img2.webp'],
  stock: 10,
  brand: 'Gin',
  colors: [
    { name: 'Sininen', hex: '#1e40af', stock: 3 },
    { name: 'Punainen', hex: '#dc2626', stock: 1 },
  ],
  sizes: [
    {
      name: 'S',
      stock: 0,
      colorStocks: [
        { colorName: 'Sininen', stock: 1 },
        { colorName: 'Punainen', stock: 0 },
      ],
    },
    {
      name: 'M',
      stock: 0,
      colorStocks: [
        { colorName: 'Sininen', stock: 2 },
        { colorName: 'Punainen', stock: 1 },
      ],
    },
  ],
};

test('order selected variant and mark shipped in admin', async ({ page }) => {
  const store = await setupOrderAdminMocks(page, [VARIANT_PRODUCT]);

  await page.goto(`/tuote/${VARIANT_PRODUCT.id}`);

  await expect(page.getByRole('heading', { name: VARIANT_PRODUCT.name })).toBeVisible();

  await page.getByRole('button', { name: /^M\b/ }).click();
  await page.getByRole('button', { name: /Punainen/ }).click();
  await page.getByRole('button', { name: /Lisää koriin/i }).click();

  await page.getByRole('link', { name: /Ostoskori/ }).click();

  const cartItem = page
    .locator('div')
    .filter({ has: page.getByRole('link', { name: VARIANT_PRODUCT.name }) })
    .first();

  await expect(cartItem.getByText('Punainen')).toBeVisible();
  await expect(cartItem.getByText('Koko: M')).toBeVisible();

  await page.getByRole('button', { name: /Siirry kassalle/ }).click();

  await page.locator('input[name="name"]').fill('Testi Asiakas');
  await page.locator('input[name="email"]').fill('testi@example.com');
  await page.locator('input[name="phone"]').fill('040 123 4567');
  await page.locator('input[name="address"]').fill('Testikatu 1');
  await page.locator('input[name="zip"]').fill('00100');
  await page.locator('input[name="city"]').fill('Helsinki');
  await page.locator('textarea[name="notes"]').fill('Toimitus perille iltapäivällä.');

  await page.locator('label:has-text("Olen lukenut") div').first().click();
  await page.getByRole('button', { name: /Vahvista tilaus/ }).click();

  await expect(page.getByRole('heading', { name: /Kiitos tilauksestasi/i })).toBeVisible();
  await expect.poll(() => store.orders.length).toBe(1);

  await page.goto('/admin');
  await expect(page.getByRole('heading', { name: /Hallintapaneeli/ })).toBeVisible();

  await page.getByRole('button', { name: /Tilaukset/ }).click();
  await expect(page.getByRole('heading', { name: 'Tilaukset' })).toBeVisible();

  const orderCard = page
    .getByText('testi@example.com')
    .locator('xpath=ancestor::div[contains(@class,"rounded-2xl")][1]');

  await expect(orderCard.getByText('Testi Asiakas', { exact: true })).toBeVisible();
  await expect(orderCard.getByText('040 123 4567')).toBeVisible();
  await expect(orderCard.getByText('Testikatu 1')).toBeVisible();
  await expect(orderCard.getByText('00100 Helsinki')).toBeVisible();

  const itemPrice = VARIANT_PRODUCT.salePrice ?? VARIANT_PRODUCT.price;
  const expectedTotal = itemPrice + 10;

  await expect(orderCard.getByText(`${expectedTotal}€`)).toBeVisible();
  await expect(orderCard.getByText(VARIANT_PRODUCT.name)).toBeVisible();
  await expect(orderCard.getByText(`1× ${itemPrice}€`)).toBeVisible();
  await expect(orderCard.getByText('(M)')).toBeVisible();

  await orderCard.getByRole('button', { name: /Käsittele/ }).click();
  await expect(orderCard.getByRole('button', { name: /Lähetä/ })).toBeVisible();
  await orderCard.getByRole('button', { name: /Lähetä/ }).click();
  await expect(orderCard.getByRole('button', { name: /Toimitettu/ })).toBeVisible();
});