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

test("v0.3 UI smoke test with live model response", async ({ page }) => {
  await page.goto("http://localhost:3000");

  // Page should load without error
  await expect(page.getByText(/Confidence Engine/i)).toBeVisible();

  // Type the scenario
  const textarea = page.locator("textarea[placeholder*='Describe']");
  await textarea.fill("Complaints increased by 35% while production increased by 40%.");

  // Button should be enabled
  await expect(page.getByRole("button", { name: /Analyse/i })).toBeEnabled();

  // Click Analyse and wait for diagnostics panel
  await page.getByRole("button", { name: /Analyse/i }).click();
  
  // Wait for result section (ReconstructionView rendered)
  await expect(page.getByRole("heading", { name: /Next Question/i })).toBeVisible({ timeout: 180000 });

  // Take screenshot of result page
  await page.screenshot({ path: "tests-results/smoke-v0.3.png", fullPage: true });

  // Verify diagnostics panel exists and contains relevant info
  const diagPanel = page.locator('details summary').first();
  if (await diagPanel.isVisible()) {
    console.log("Raw response viewer:", await diagPanel.innerText().catch(() => "not visible"));
  }

  // Get full body text for verification
  const bodyText = await page.locator("body").innerText();
  
  console.log("\n=== UI Smoke Test Results ===");
  console.log("Page title:", await page.title());
  console.log("Body content length:", bodyText.length);
  
  // Check key content indicators
  const hasNextQ = bodyText.includes("Next Question");
  const hasComplaints = bodyText.includes("Complaint") || bodyText.includes("complaint");
  const hasProduction = bodyText.includes("production") || bodyText.includes("Production");
  const hasRateContext = bodyText.toLowerCase().includes("rate") || 
                         bodyText.toLowerCase().includes("unit") ||
                         bodyText.toLowerCase().includes("denominator") ||
                         bodyText.toLowerCase().includes("per-unit");
  
  console.log("Has Next Question heading:", hasNextQ);
  console.log("Has complaints reference:", hasComplaints);
  console.log("Has production reference:", hasProduction);
  console.log("Has rate context (rate/unit/denominator):", hasRateContext);

  // Basic structural checks
  expect(bodyText.length).toBeGreaterThan(200);
  expect(hasNextQ).toBe(true);
}, { timeout: 300000 });