import { test, expect, type Page } from '@playwright/test'
import * as fs from 'fs'
import { fileURLToPath } from 'url'
import * as path from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const SHARED_FILE = path.join(__dirname, '.e2e-catalog.json')

function saveCatalog(data: Record<string, string>) {
    fs.writeFileSync(SHARED_FILE, JSON.stringify(data))
}

// Clase y parte con fraccion valida del catalogo SITAR
// 8471.30.01 es una fraccion comun para equipos de computo — existe en SITAR
const CLASS_CODE = 'E2E01'
const CLASS_FRACTION = '12787'
// HTS-style code resolvable via SITAR fracciones-usa (8 or 10 digit patterns used in UI)
const CLASS_US_FRACTION = '8471300100'
const CLASS_UM = 'KGS'
const CLASS_MATERIAL_KEY = 'MP'
const CLASS_DESC_ES = 'Clase E2E Test'
const CLASS_DESC_EN = 'E2E Test Class'

const PART_NUMBER = 'E2E-PART-001'
const PART_DESC_ES = 'Parte E2E Test'

async function fillInput(page: Page, selector: string, value: string) {
    await page.locator(selector).click()
    await page.evaluate(({ sel, val }: { sel: string; val: string }) => {
        const el = document.querySelector(sel) as HTMLInputElement
        if (!el) return
        const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set
        setter?.call(el, val)
        el.dispatchEvent(new Event('input', { bubbles: true }))
        el.dispatchEvent(new Event('change', { bubbles: true }))
    }, { sel: selector, val: value })
    await page.waitForTimeout(300)
}

test.describe('Setup — Catalogos para pruebas E2E', () => {

    test('1. crear clase valida', async ({ page }) => {
        await page.goto('/dashboard/goods/fixed-asset-classes')
        await page.waitForLoadState('networkidle')

        // Abrir dialog de nueva clase
        await page.getByRole('button', { name: /Insertar|Nueva Clase|Nuevo/ }).first().click()
        await page.waitForTimeout(800)

        await expect(page.getByRole('dialog')).toBeVisible({ timeout: 10000 })

        // Llenar campos
        await page.locator('#class_code').scrollIntoViewIfNeeded()
        await fillInput(page, '#class_code', CLASS_CODE)

        await page.locator('#material_key').scrollIntoViewIfNeeded()
        await fillInput(page, '#material_key', CLASS_MATERIAL_KEY)

        await page.locator('#description_es').scrollIntoViewIfNeeded()
        await fillInput(page, '#description_es', CLASS_DESC_ES)

        await page.locator('#description_en').scrollIntoViewIfNeeded()
        await fillInput(page, '#description_en', CLASS_DESC_EN)

        await page.locator('#unit_of_measure').scrollIntoViewIfNeeded()
        await fillInput(page, '#unit_of_measure', CLASS_UM)

        await page.locator('#fraction').scrollIntoViewIfNeeded()
        await fillInput(page, '#fraction', CLASS_FRACTION)
        // El input #fraction abre TariffFractionSelector (SITAR) como dialog anidado.
        // El onclick está en el <tr> — hacer click forzado en la primera fila lo cierra.
        await page.waitForTimeout(1500)
        const sitarDialog = page.getByRole('dialog', { name: /SITAR/i })
        if (await sitarDialog.isVisible().catch(() => false)) {
            await sitarDialog.locator('tbody tr').first()
                .click({ force: true, timeout: 5000 })
                .catch(async () => {
                    // Fallback: cerrar con Close si no podemos clickear fila
                    await sitarDialog.getByRole('button', { name: /Close|Cerrar/ })
                        .click({ force: true }).catch(() => {})
                })
            await sitarDialog.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
        }

        await page.locator('#us_fraction').scrollIntoViewIfNeeded()
        await fillInput(page, '#us_fraction', CLASS_US_FRACTION)
        await page.waitForTimeout(1500)
        // Mismo patrón para catálogo de fracciones americanas si abre.
        const usDialog = page.getByRole('dialog', { name: /AMERICANA|US/i })
        if (await usDialog.isVisible().catch(() => false)) {
            await usDialog.locator('tbody tr').first()
                .click({ force: true, timeout: 5000 })
                .catch(async () => {
                    await usDialog.getByRole('button', { name: /Close|Cerrar/ })
                        .click({ force: true }).catch(() => {})
                })
            await usDialog.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
        }

        // Guardar
        await page.getByRole('button', { name: /^Guardar$/ }).scrollIntoViewIfNeeded()
        await page.getByRole('button', { name: /^Guardar$/ }).click()
        await page.waitForTimeout(3000)

        // Si aparece un error visible, mostrarlo para diagnóstico (no toleramos silencioso).
        const errorEl = page.locator('.text-destructive, [role="alert"]').first()
        if (await errorEl.isVisible({ timeout: 500 }).catch(() => false)) {
            const txt = await errorEl.textContent()
            console.log('[DEBUG][crear clase] Error visible:', txt)
        }

        saveCatalog({ CLASS_CODE, PART_NUMBER })
        await expect(page.locator('main')).toBeVisible()
    })

    test('2. verificar clase en tabla', async ({ page }) => {
        await page.goto('/dashboard/goods/fixed-asset-classes')
        await page.waitForLoadState('networkidle')

        // Buscar la clase creada en la tabla
        const classRow = page.locator('tbody').getByText(CLASS_CODE)
        if (await classRow.isVisible({ timeout: 5000 }).catch(() => false)) {
            await expect(classRow.first()).toBeVisible()
        } else {
            // La clase puede no aparecer si ya existia — OK
            console.log('Clase no encontrada en tabla — puede ya existir con otro nombre')
        }
    })

    test('3. crear parte valida', async ({ page }) => {
        // Las partes se crean en /dashboard/goods/parts/edit/new
        await page.goto('/dashboard/goods/parts/edit/new')
        await page.waitForLoadState('networkidle')
        await page.waitForTimeout(800)

        // PrerequisitesModal: AlertDialog "Aviso" que abre cuando la DB no tiene
        // Agentes aduanales o Clientes registrados (caso típico en E2E con DB limpia).
        // Bloquea pointer events con un overlay sobre todo el form. Cancelar te saca
        // del editor; Aceptar lo cierra y permite continuar.
        // Ver routes/dashboard/goods/parts/edit/[[id]]/+page.svelte:29-38.
        const prerequisitesDialog = page.getByRole('alertdialog', { name: /Aviso/i })
        if (await prerequisitesDialog.isVisible({ timeout: 2000 }).catch(() => false)) {
            await prerequisitesDialog.getByRole('button', { name: /^Aceptar$/ }).click()
            await prerequisitesDialog.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
        }

        // Llenar campos del formulario de nueva parte
        // Numero de parte
        const partInput = page.locator('#part_number, input[placeholder*="parte"], input[placeholder*="número"], input[name="part_number"]').first()
        if (await partInput.isVisible({ timeout: 3000 }).catch(() => false)) {
            await partInput.scrollIntoViewIfNeeded()
            await fillInput(page, '#part_number', PART_NUMBER).catch(async () => {
                await partInput.fill(PART_NUMBER)
            })
        }

        // Descripcion en español
        const descInput = page.locator('#description_es, textarea[placeholder*="español"], input[placeholder*="escripción"]').first()
        if (await descInput.isVisible({ timeout: 2000 }).catch(() => false)) {
            await descInput.scrollIntoViewIfNeeded()
            await descInput.fill(PART_DESC_ES).catch(() => {})
        }

        // Clase — puede ser un input o select
        const claseInput = page.locator('#class_code, #clase, input[placeholder*="Clase"], input[placeholder*="clase"]').first()
        if (await claseInput.isVisible({ timeout: 2000 }).catch(() => false)) {
            await claseInput.scrollIntoViewIfNeeded()
            await claseInput.fill(CLASS_CODE).catch(() => {})
            await page.waitForTimeout(500)
            const option = page.getByRole('option').first()
            if (await option.isVisible({ timeout: 1000 }).catch(() => false)) {
                await option.click()
            }
        }

        // Guardar
        const saveBtn = page.getByRole('button', { name: /Guardar|Crear|Insertar/ }).first()
        if (await saveBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
            await saveBtn.scrollIntoViewIfNeeded()
            await saveBtn.click()
            await page.waitForTimeout(1000)
        }

        await expect(page.locator('main')).toBeVisible()
    })

})