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

test.describe('Tesla Roadtrip - Full Chat to Map Flow', () => {

  test.setTimeout(180000);

  test('should send a trip request, get real Grok response, and render itinerary + map', async ({ page }) => {
    await page.goto('http://localhost:5173');

    // Better header selector
    const grokHeader = page.locator('div.font-semibold.text-lg.tracking-tight:has-text("Grok Drive")').first();
    await expect(grokHeader).toBeVisible({ timeout: 15000 });

    const chatInput = page.locator('input[placeholder*="Tell me where you want to drive"], input[placeholder*="drive"]');
    await expect(chatInput).toBeVisible();

    const tripRequest = 'I want to go from Milton Keynes to Telford in my Model Y';
    await chatInput.fill(tripRequest);

    const sendButton = page.locator('button:has(svg)').last();
    await sendButton.click();

    // Wait for thinking state
    const thinking = page.locator('text=GROK IS PLANNING YOUR ROUTE');
    await thinking.waitFor({ state: 'visible', timeout: 20000 }).catch(() => {});

    // Wait for Grok to finish
    await thinking.waitFor({ state: 'hidden', timeout: 120000 });

    const lastAssistant = page.locator('.chat-bubble-assistant').last();

    // === DIAGNOSTIC: Detect the common failure mode early ===
    const messageText = await lastAssistant.textContent();
    if (messageText?.includes('having trouble reaching Grok')) {
      await page.screenshot({ path: `test-results/grok-failed-${Date.now()}.png`, fullPage: true });
      throw new Error('Grok call failed (got error message). Check backend logs + make sure XAI_API_KEY is loaded correctly (use ./scripts/dev.sh).');
    }

    // Success path
    const dayOne = page.locator('text=DAY 1').first();
    await expect(dayOne).toBeVisible({ timeout: 30000 });

    const stop = page.locator('.group:has-text("Supercharger"), .group:has-text("Hotel")').first();
    await expect(stop).toBeVisible({ timeout: 15000 });

    await page.screenshot({ 
      path: `test-results/success-milton-keynes-telford-${Date.now()}.png`, 
      fullPage: true 
    });

    console.log('✅ Full flow succeeded: Real Grok itinerary rendered on map!');
  });

});