import { useState, useEffect, useRef } from "react";

// ════════════════════════════════════════════════════════════════
// POD Push Traffic Evaluator v3.1
// DETERMINISTIC SCORING: AI extracts → JS scores → AI reasons
// ════════════════════════════════════════════════════════════════

const API_KEY = "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";
const MODEL = "claude-sonnet-4-20250514";

// ── Storage ──
const SK = { winners: "p4w", losers: "p4l", patterns: "p4p", tests: "p4t" };
async function sGet(k) { try { const r = await window.storage.get(k); return r ? JSON.parse(r.value) : null; } catch { return null; } }
async function sSet(k, v) { try { await window.storage.set(k, JSON.stringify(v)); } catch(e) { console.error(e); } }

// ── AI helpers ──
async function callAI(messages, maxTokens = 4096) {
  const res = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json", "x-api-key": API_KEY, "anthropic-version": "2023-06-01", "anthropic-dangerous-direct-browser-access": "true" },
    body: JSON.stringify({ model: MODEL, max_tokens: maxTokens, messages }),
  });
  const data = await res.json();
  return data.content?.map(b => b.text || "").join("") || "";
}

async function callAIJSON(messages, maxTokens = 4096) {
  const raw = await callAI(messages, maxTokens);
  return JSON.parse(raw.replace(/```json|```/g, "").trim());
}

function fileToBase64(file) {
  return new Promise((res, rej) => {
    const r = new FileReader();
    r.onload = () => res({ base64: r.result.split(",")[1], mediaType: file.type });
    r.onerror = rej;
    r.readAsDataURL(file);
  });
}

// ══════════════════════════════════════════════════════════════
// RULE-BASED SCORING ENGINE — 100% Deterministic
// ══════════════════════════════════════════════════════════════

const NICHE_DATA = {
  "father's day": { marketSize: 9, trend: 7, peakMonth: 6, seasonal: true },
  "mother's day": { marketSize: 8, trend: 7, peakMonth: 5, seasonal: true },
  "christmas": { marketSize: 9, trend: 7, peakMonth: 11, seasonal: true },
  "halloween": { marketSize: 7, trend: 8, peakMonth: 10, seasonal: true },
  "valentine": { marketSize: 7, trend: 6, peakMonth: 2, seasonal: true },
  "couple": { marketSize: 6, trend: 9, peakMonth: null, seasonal: false },
  "sister": { marketSize: 7, trend: 2, peakMonth: null, seasonal: false },
  "bestie": { marketSize: 7, trend: 3, peakMonth: null, seasonal: false },
  "family": { marketSize: 8, trend: 7, peakMonth: null, seasonal: false },
  "dog": { marketSize: 7, trend: 7, peakMonth: null, seasonal: false },
  "cat": { marketSize: 6, trend: 6, peakMonth: null, seasonal: false },
  "nurse": { marketSize: 5, trend: 6, peakMonth: 5, seasonal: true },
  "teacher": { marketSize: 5, trend: 6, peakMonth: 5, seasonal: true },
  "baby": { marketSize: 6, trend: 7, peakMonth: null, seasonal: false },
  "grandparent": { marketSize: 6, trend: 6, peakMonth: null, seasonal: false },
  "motivational": { marketSize: 6, trend: 5, peakMonth: null, seasonal: false },
  "self-love": { marketSize: 5, trend: 5, peakMonth: null, seasonal: false },
  "encouragement": { marketSize: 5, trend: 6, peakMonth: null, seasonal: false },
  "mental health": { marketSize: 5, trend: 7, peakMonth: null, seasonal: false },
  "christian": { marketSize: 6, trend: 6, peakMonth: null, seasonal: false },
  "camping": { marketSize: 5, trend: 6, peakMonth: 7, seasonal: true },
  "fishing": { marketSize: 5, trend: 5, peakMonth: 6, seasonal: true },
};

const PRODUCT_TYPE_DATA = {
  "mug": { noveltyBase: 3, canvasWeight: false, personalizeEase: 8, scalability: 8 },
  "canvas": { noveltyBase: 4, canvasWeight: true, personalizeEase: 7, scalability: 7 },
  "poster": { noveltyBase: 3, canvasWeight: true, personalizeEase: 7, scalability: 7 },
  "puzzle": { noveltyBase: 6, canvasWeight: false, personalizeEase: 6, scalability: 6 },
  "t-shirt": { noveltyBase: 2, canvasWeight: false, personalizeEase: 5, scalability: 9 },
  "hoodie": { noveltyBase: 3, canvasWeight: false, personalizeEase: 5, scalability: 7 },
  "blanket": { noveltyBase: 5, canvasWeight: true, personalizeEase: 6, scalability: 5 },
  "ornament": { noveltyBase: 5, canvasWeight: false, personalizeEase: 6, scalability: 6 },
  "tumbler": { noveltyBase: 4, canvasWeight: false, personalizeEase: 7, scalability: 7 },
  "onesie": { noveltyBase: 6, canvasWeight: false, personalizeEase: 5, scalability: 5 },
  "car visor clip": { noveltyBase: 9, canvasWeight: false, personalizeEase: 5, scalability: 4 },
  "phone case": { noveltyBase: 3, canvasWeight: false, personalizeEase: 6, scalability: 7 },
  "tote bag": { noveltyBase: 4, canvasWeight: false, personalizeEase: 6, scalability: 6 },
  "crochet": { noveltyBase: 7, canvasWeight: false, personalizeEase: 3, scalability: 4 },
  "twotone mug": { noveltyBase: 6, canvasWeight: false, personalizeEase: 8, scalability: 7 },
};

const EMOTION_SCORES = {
  "pride": 9, "love": 8, "joy": 7, "admiration": 7, "nostalgia": 7,
  "contentment": 5, "humor": 6, "sarcasm": 5, "gratitude": 6,
  "hope": 5, "encouragement": 5, "generic positive": 3, "none": 1,
};

const ART_STYLE_NICHE_FIT = {
  "cartoon": { "bestie": 8, "sister": 8, "friend": 8, "family": 6, "couple": 6, "dog": 8, "cat": 8, "default": 6 },
  "semi real": { "family": 8, "mother's day": 9, "father's day": 8, "couple": 8, "default": 7 },
  "watercolor": { "family": 8, "mother's day": 8, "couple": 7, "default": 6 },
  "text only": { "motivational": 7, "sarcasm": 8, "funny": 8, "default": 5 },
  "photo": { "couple": 6, "family": 7, "default": 5 },
  "handmade": { "encouragement": 7, "self-love": 7, "gift": 7, "default": 6 },
  "icon/symbol": { "default": 5 },
};

function getSeasonalMultiplier(nicheKey, currentMonth) {
  const nd = NICHE_DATA[nicheKey];
  if (!nd || !nd.seasonal || !nd.peakMonth) return 1.0;
  const diff = nd.peakMonth - currentMonth;
  const weeksBefore = diff >= 0 ? diff * 4.3 : (diff + 12) * 4.3;
  if (weeksBefore >= 2 && weeksBefore <= 4) return 1.5;
  if (weeksBefore > 4 && weeksBefore <= 8) return 1.3;
  return 1.0;
}

function findNicheKey(nicheStr) {
  if (!nicheStr) return null;
  const lower = nicheStr.toLowerCase();
  for (const key of Object.keys(NICHE_DATA)) {
    if (lower.includes(key)) return key;
  }
  return null;
}

function findProductKey(ptStr) {
  if (!ptStr) return null;
  const lower = ptStr.toLowerCase();
  for (const key of Object.keys(PRODUCT_TYPE_DATA)) {
    if (lower.includes(key)) return key;
  }
  return null;
}

function findArtStyleKey(asStr) {
  if (!asStr) return null;
  const lower = asStr.toLowerCase();
  if (lower.includes("cartoon")) return "cartoon";
  if (lower.includes("semi real") || lower.includes("semi-real") || lower.includes("realistic")) return "semi real";
  if (lower.includes("watercolor")) return "watercolor";
  if (lower.includes("text only") || lower.includes("text-only") || lower.includes("typography")) return "text only";
  if (lower.includes("photo")) return "photo";
  if (lower.includes("handmade") || lower.includes("crochet") || lower.includes("craft")) return "handmade";
  if (lower.includes("icon") || lower.includes("symbol")) return "icon/symbol";
  return null;
}

function findEmotionKey(emotionStr) {
  if (!emotionStr) return "none";
  const lower = emotionStr.toLowerCase();
  for (const key of Object.keys(EMOTION_SCORES)) {
    if (lower.includes(key)) return key;
  }
  return "generic positive";
}

// ── MAIN SCORING FUNCTION ──
function scoreProduct(attrs) {
  const nicheKey = findNicheKey(attrs.niche);
  const productKey = findProductKey(attrs.productType);
  const artKey = findArtStyleKey(attrs.artStyle);
  const emotionKey = findEmotionKey(attrs.emotionalTrigger);
  const currentMonth = new Date().getMonth() + 1;
  const nd = nicheKey ? NICHE_DATA[nicheKey] : null;
  const pd = productKey ? PRODUCT_TYPE_DATA[productKey] : null;

  const results = {};
  let totalWeightedScore = 0;
  let totalWeight = 0;

  // ── 1. TOPIC FIT ──
  const tf_marketSize = nd ? nd.marketSize : 5;
  const tf_buyerClarity = attrs.buyerUserSame === "different" ? 8 : attrs.buyerUserSame === "same" ? 6 : 5;
  const tf_subtopicDepth = nd ? Math.min(nd.marketSize + 1, 10) : 5;
  const tf_trend = nd ? nd.trend : 5;
  const tf_confidence = nd ? 0.85 : 0.4;
  const tf_score = Math.round(((tf_marketSize + tf_buyerClarity + tf_subtopicDepth + tf_trend) / 4) * 10) / 10;

  results.topicFit = {
    score: Math.min(10, Math.max(1, tf_score)),
    confidence: tf_confidence,
    subFactors: [
      { name: "Market Size", score: tf_marketSize, note: nd ? `Niche "${nicheKey}" trong database` : "Niche chưa có trong database" },
      { name: "Buyer vs User Clarity", score: tf_buyerClarity, note: attrs.buyerUserSame === "different" ? "Buyer ≠ User → rõ ràng (gift)" : "Buyer có thể = User" },
      { name: "Sub-topic Depth", score: tf_subtopicDepth, note: nd ? "Có data sub-topics" : "Chưa rõ depth" },
      { name: "Trend Direction", score: tf_trend, note: nd ? `Trend score: ${tf_trend}/10` : "Không đủ data trend" },
    ],
  };

  // ── 2. DEMAND STRENGTH ──
  const seasonalMult = nicheKey ? getSeasonalMultiplier(nicheKey, currentMonth) : 1.0;
  const dm_insight = attrs.insightDepth === "strong" ? 8 : attrs.insightDepth === "medium" ? 6 : attrs.insightDepth === "weak" ? 3 : 4;
  const dm_emotion = EMOTION_SCORES[emotionKey] || 4;
  const dm_category = attrs.demandCategory === "spiritual" ? 7 : attrs.demandCategory === "material" ? 5 : 6;
  const dm_seasonality = nd?.seasonal ? (seasonalMult > 1 ? 8 : 5) : 5;
  const dm_raw = (dm_insight + dm_emotion + dm_category + dm_seasonality) / 4;
  const dm_score = Math.min(10, dm_raw * seasonalMult);
  const dm_confidence = attrs.insightDepth ? 0.8 : 0.5;

  results.demandStrength = {
    score: Math.round(Math.min(10, Math.max(1, dm_score)) * 10) / 10,
    confidence: dm_confidence,
    seasonalMultiplier: seasonalMult,
    subFactors: [
      { name: "Insight Depth", score: dm_insight, note: `Insight: ${attrs.insightDepth || "chưa xác định"}` },
      { name: "Emotional Trigger", score: dm_emotion, note: `Emotion: ${emotionKey} (${dm_emotion}/10)` },
      { name: "Demand Category", score: dm_category, note: attrs.demandCategory === "spiritual" ? "Tinh thần → mạnh cho personalized" : "Vật chất/Chưa rõ" },
      { name: "Seasonality", score: dm_seasonality, note: seasonalMult > 1 ? `Peak sắp đến! ×${seasonalMult}` : "Evergreen hoặc ngoài mùa" },
    ],
  };

  // ── 3. CONCEPT COHERENCE ──
  const cc_firstImpression = attrs.firstImpressionClear === "yes" ? 8 : attrs.firstImpressionClear === "somewhat" ? 6 : 4;
  let cc_artNicheFit = 5;
  if (artKey && nicheKey) {
    const fitMap = ART_STYLE_NICHE_FIT[artKey];
    cc_artNicheFit = fitMap?.[nicheKey] || fitMap?.["default"] || 5;
  } else if (artKey) {
    cc_artNicheFit = ART_STYLE_NICHE_FIT[artKey]?.["default"] || 5;
  }
  const cc_messageTone = attrs.messageToneMatch === "perfect" ? 9 : attrs.messageToneMatch === "good" ? 7 : attrs.messageToneMatch === "mismatch" ? 3 : 5;
  const cc_productUseCase = attrs.productUseCaseFit === "perfect" ? 9 : attrs.productUseCaseFit === "good" ? 7 : attrs.productUseCaseFit === "weak" ? 4 : 5;
  const cc_focalPoint = attrs.hasSingleFocalPoint === "yes" ? 8 : attrs.hasSingleFocalPoint === "somewhat" ? 6 : 4;
  const cc_score = (cc_firstImpression + cc_artNicheFit + cc_messageTone + cc_productUseCase + cc_focalPoint) / 5;
  const cc_confidence = (attrs.firstImpressionClear && attrs.messageToneMatch) ? 0.85 : 0.6;

  results.conceptCoherence = {
    score: Math.round(Math.min(10, Math.max(1, cc_score)) * 10) / 10,
    confidence: cc_confidence,
    subFactors: [
      { name: "First Impression (2s)", score: cc_firstImpression, note: attrs.firstImpressionClear === "yes" ? "Hiểu ngay trong 2s" : "Cần thời gian để hiểu" },
      { name: "Art Style × Niche", score: cc_artNicheFit, note: `${artKey || "?"} × ${nicheKey || "?"} = ${cc_artNicheFit}/10` },
      { name: "Message × Tone", score: cc_messageTone, note: `Match: ${attrs.messageToneMatch || "chưa rõ"}` },
      { name: "Product × Use Case", score: cc_productUseCase, note: `Fit: ${attrs.productUseCaseFit || "chưa rõ"}` },
      { name: "Single Focal Point", score: cc_focalPoint, note: attrs.hasSingleFocalPoint === "yes" ? "Có 1 điểm nhấn rõ" : "Thiếu focal point" },
    ],
  };

  // ── 4. NOVELTY & DELIGHT ──
  const nv_productNovelty = pd ? pd.noveltyBase : 5;
  const nv_conceptFresh = attrs.conceptFreshness === "very fresh" ? 9 : attrs.conceptFreshness === "fresh" ? 7 : attrs.conceptFreshness === "common" ? 4 : attrs.conceptFreshness === "saturated" ? 2 : 5;
  const nv_personalizationInno = attrs.personalizationInnovation === "innovative" ? 9 : attrs.personalizationInnovation === "above average" ? 7 : attrs.personalizationInnovation === "standard" ? 4 : attrs.personalizationInnovation === "none" ? 2 : 4;
  const nv_surprise = attrs.surpriseElement === "high" ? 9 : attrs.surpriseElement === "moderate" ? 6 : attrs.surpriseElement === "low" ? 3 : 4;
  const nv_score = (nv_productNovelty + nv_conceptFresh + nv_personalizationInno + nv_surprise) / 4;
  const nv_confidence = (attrs.conceptFreshness && attrs.surpriseElement) ? 0.8 : 0.5;

  results.noveltyDelight = {
    score: Math.round(Math.min(10, Math.max(1, nv_score)) * 10) / 10,
    confidence: nv_confidence,
    subFactors: [
      { name: "Product Type Novelty", score: nv_productNovelty, note: pd ? `${productKey}: base novelty ${nv_productNovelty}` : "Product type chưa có data" },
      { name: "Concept Freshness", score: nv_conceptFresh, note: `${attrs.conceptFreshness || "chưa rõ"}` },
      { name: "Personalization Innovation", score: nv_personalizationInno, note: `${attrs.personalizationInnovation || "chưa rõ"}` },
      { name: "Surprise Element", score: nv_surprise, note: `${attrs.surpriseElement || "chưa rõ"}` },
    ],
  };

  // ── 5. DESIGN EXECUTION ──
  const hasArt = attrs.hasArt !== "no";
  const de_applicable = [];
  const de_na = [];

  const de_typography = attrs.typographyQuality === "excellent" ? 9 : attrs.typographyQuality === "good" ? 7 : attrs.typographyQuality === "ok" ? 5 : attrs.typographyQuality === "poor" ? 3 : 5;
  de_applicable.push({ name: "Typography", score: de_typography, note: `Quality: ${attrs.typographyQuality || "chưa rõ"}` });

  const de_color = attrs.colorHarmony === "excellent" ? 9 : attrs.colorHarmony === "good" ? 7 : attrs.colorHarmony === "ok" ? 5 : attrs.colorHarmony === "poor" ? 3 : 5;
  de_applicable.push({ name: "Color Harmony", score: de_color, note: `${attrs.colorHarmony || "chưa rõ"}` });

  if (hasArt) {
    const de_artQ = attrs.artQuality === "excellent" ? 9 : attrs.artQuality === "good" ? 7 : attrs.artQuality === "ok" ? 5 : attrs.artQuality === "poor" ? 3 : 5;
    de_applicable.push({ name: "Art Quality", score: de_artQ, note: `${attrs.artQuality || "chưa rõ"}` });
  } else {
    de_na.push("Art Quality");
  }

  const de_bg = attrs.backgroundQuality === "excellent" ? 9 : attrs.backgroundQuality === "good" ? 7 : attrs.backgroundQuality === "ok" ? 5 : attrs.backgroundQuality === "poor" ? 3 : 5;
  de_applicable.push({ name: "Background", score: de_bg, note: `${attrs.backgroundQuality || "chưa rõ"}` });

  const de_layout = attrs.layoutBalance === "excellent" ? 9 : attrs.layoutBalance === "good" ? 7 : attrs.layoutBalance === "ok" ? 5 : attrs.layoutBalance === "poor" ? 3 : 5;
  de_applicable.push({ name: "Layout Balance", score: de_layout, note: `${attrs.layoutBalance || "chưa rõ"}` });

  const de_score = de_applicable.reduce((s, f) => s + f.score, 0) / de_applicable.length;
  const de_confidence = attrs.typographyQuality ? 0.8 : 0.5;

  results.designExecution = {
    score: Math.round(Math.min(10, Math.max(1, de_score)) * 10) / 10,
    confidence: de_confidence,
    subFactors: de_applicable,
    notApplicable: de_na,
  };

  // ── 6. PERSONALIZATION POWER ──
  const pp_depth = attrs.personalizationLevel === "deep" ? 9 : attrs.personalizationLevel === "medium" ? 7 : attrs.personalizationLevel === "basic" ? 5 : attrs.personalizationLevel === "none" ? 2 : 4;
  const pp_options = attrs.optionVariety === "rich" ? 9 : attrs.optionVariety === "moderate" ? 6 : attrs.optionVariety === "limited" ? 4 : attrs.optionVariety === "none" ? 2 : 4;
  const pp_placement = attrs.namePlacement === "natural" ? 8 : attrs.namePlacement === "ok" ? 6 : attrs.namePlacement === "forced" ? 3 : attrs.namePlacement === "none" ? 2 : 4;
  const pp_backendUX = attrs.backendUX === "excellent" ? 9 : attrs.backendUX === "good" ? 7 : attrs.backendUX === "ok" ? 5 : 5;
  const pp_score = (pp_depth + pp_options + pp_placement + pp_backendUX) / 4;
  const pp_confidence = attrs.personalizationLevel ? 0.85 : 0.5;

  // If product has NO personalization at all, mark applicable but low score (don't skip)
  results.personalizationPower = {
    score: Math.round(Math.min(10, Math.max(1, pp_score)) * 10) / 10,
    confidence: pp_confidence,
    subFactors: [
      { name: "Depth", score: pp_depth, note: `Level: ${attrs.personalizationLevel || "chưa rõ"}` },
      { name: "Option Variety", score: pp_options, note: `${attrs.optionVariety || "chưa rõ"}` },
      { name: "Name Placement", score: pp_placement, note: `${attrs.namePlacement || "chưa rõ"}` },
      { name: "Backend UX", score: pp_backendUX, note: `${attrs.backendUX || "chưa rõ"}` },
    ],
  };

  // ── FINAL SCORE (Adaptive Weighted Sum + Confidence) ──
  const productWeights = getWeightsForProduct(productKey);
  const patternEntries = [
    { key: "topicFit", wKey: "topic" },
    { key: "demandStrength", wKey: "demand" },
    { key: "conceptCoherence", wKey: "concept" },
    { key: "noveltyDelight", wKey: "novelty" },
    { key: "designExecution", wKey: "design" },
    { key: "personalizationPower", wKey: "personalization" },
  ];

  for (const pe of patternEntries) {
    const pat = results[pe.key];
    const w = productWeights[pe.wKey] || 0.15;
    totalWeightedScore += w * pat.score * pat.confidence;
    totalWeight += w * pat.confidence;
  }

  const finalScore = totalWeight > 0 ? Math.round((totalWeightedScore / totalWeight) * 10) / 10 : 0;
  const verdict = finalScore >= 7 ? "GO" : finalScore >= 5 ? "MAYBE" : "NOGO";

  // ── SCALE POTENTIAL (separate) ──
  const sp_topic = nd ? Math.min(nd.marketSize + 1, 10) : 5;
  const sp_product = pd ? pd.scalability : 5;
  const sp_scamper = attrs.scamperPotential === "high" ? 8 : attrs.scamperPotential === "medium" ? 6 : 4;
  const scalePotential = Math.round(((sp_topic + sp_product + sp_scamper) / 3) * 10) / 10;

  return {
    scoring: results,
    finalScore: Math.min(10, Math.max(1, finalScore)),
    verdict,
    scalePotential: { score: scalePotential, directions: [] },
    weights: productWeights,
    seasonalMultiplier: seasonalMult,
  };
}

function getWeightsForProduct(productKey) {
  const presets = {
    "canvas": { topic: 0.18, demand: 0.22, concept: 0.20, novelty: 0.13, design: 0.17, personalization: 0.10 },
    "poster": { topic: 0.18, demand: 0.22, concept: 0.20, novelty: 0.13, design: 0.17, personalization: 0.10 },
    "puzzle": { topic: 0.20, demand: 0.25, concept: 0.18, novelty: 0.15, design: 0.12, personalization: 0.10 },
    "mug": { topic: 0.20, demand: 0.25, concept: 0.18, novelty: 0.15, design: 0.12, personalization: 0.10 },
  };
  return presets[productKey] || { topic: 0.20, demand: 0.25, concept: 0.18, novelty: 0.15, design: 0.12, personalization: 0.10 };
}

// ── AI EXTRACT PROMPT ──
const EXTRACT_PROMPT = `Bạn là expert POD product analyst. Phân tích ảnh/mô tả product và extract CHÍNH XÁC các thuộc tính sau.

CRITICAL: Chỉ trả về JSON, không markdown, không backtick. Trả lời bằng các giá trị ENUM được chỉ định.

{
  "title": "tên mô tả ngắn product",
  "productType": "mug|canvas|poster|puzzle|t-shirt|hoodie|blanket|ornament|tumbler|onesie|car visor clip|phone case|tote bag|crochet|twotone mug|other: ...",
  "niche": "father's day|mother's day|christmas|halloween|valentine|couple|sister|bestie|family|dog|cat|nurse|teacher|baby|grandparent|motivational|self-love|encouragement|mental health|christian|camping|fishing|other: ...",
  "artStyle": "cartoon|semi real|watercolor|text only|photo|handmade|icon/symbol|other: ...",
  "hasArt": "yes|no",
  "quote": "text quote nếu có, hoặc null",
  "colorPalette": "mô tả ngắn màu chính",
  "targetBuyer": "mô tả buyer ngắn",
  "targetUser": "mô tả user ngắn",
  "buyerUserSame": "same|different|unclear",
  "emotionalTrigger": "pride|love|joy|admiration|nostalgia|contentment|humor|sarcasm|gratitude|hope|encouragement|generic positive|none",
  "insightDepth": "strong|medium|weak",
  "demandCategory": "spiritual|material|mixed",
  "firstImpressionClear": "yes|somewhat|no",
  "messageToneMatch": "perfect|good|ok|mismatch",
  "productUseCaseFit": "perfect|good|weak",
  "hasSingleFocalPoint": "yes|somewhat|no",
  "conceptFreshness": "very fresh|fresh|common|saturated",
  "personalizationLevel": "deep|medium|basic|none",
  "personalizationInnovation": "innovative|above average|standard|none",
  "optionVariety": "rich|moderate|limited|none",
  "namePlacement": "natural|ok|forced|none",
  "backendUX": "excellent|good|ok|unknown",
  "surpriseElement": "high|moderate|low",
  "typographyQuality": "excellent|good|ok|poor",
  "colorHarmony": "excellent|good|ok|poor",
  "artQuality": "excellent|good|ok|poor|n/a",
  "backgroundQuality": "excellent|good|ok|poor",
  "layoutBalance": "excellent|good|ok|poor",
  "scamperPotential": "high|medium|low"
}`;

// ══════════════════════════════════════════
// MAIN APP
// ══════════════════════════════════════════
export default function App() {
  const [tab, setTab] = useState("evaluate");
  const [winners, setWinners] = useState([]);
  const [losers, setLosers] = useState([]);
  const [tests, setTests] = useState([]);
  const [patterns, setPatterns] = useState([]);

  useEffect(() => {
    (async () => {
      const [w, l, t, p] = await Promise.all([sGet(SK.winners), sGet(SK.losers), sGet(SK.tests), sGet(SK.patterns)]);
      if (w) setWinners(w); if (l) setLosers(l); if (t) setTests(t); if (p) setPatterns(p);
    })();
  }, []);

  const saveW = async d => { setWinners(d); await sSet(SK.winners, d); };
  const saveL = async d => { setLosers(d); await sSet(SK.losers, d); };
  const saveT = async d => { setTests(d); await sSet(SK.tests, d); };
  const saveP = async d => { setPatterns(d); await sSet(SK.patterns, d); };

  const tabs = [
    { id: "evaluate", label: "Đánh giá", icon: "🔍" },
    { id: "training", label: `Training (${winners.length + losers.length})`, icon: "🧠" },
    { id: "patterns", label: `Patterns`, icon: "📊" },
    { id: "test", label: `Test (${tests.length})`, icon: "🧪" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "#FAF9F6", fontFamily: "'Instrument Sans', system-ui, sans-serif" }}>
      <style>{`
        :root { --bg:#FAF9F6; --card:#FFF; --text:#1a1a2e; --muted:#8a8a9a; --border:#e8e6e1; --accent:#E8530E; --accent-light:#FFF3ED; --green:#22A06B; --green-light:#E3FCEF; --red:#DE350B; --red-light:#FFEBE6; --blue:#0065FF; --blue-light:#DEEBFF; --gold:#FF8B00; --gold-light:#FFF7E6; }
        *{box-sizing:border-box;margin:0;padding:0}
        .card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px}
        .btn{border:none;border-radius:10px;padding:12px 20px;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;font-family:inherit}
        .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:#C4440B}
        .btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)} .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
        .btn-sm{padding:8px 14px;font-size:12px}
        input,textarea,select{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--card);color:var(--text);outline:none}
        input:focus,textarea:focus{border-color:var(--accent)}
        .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
        .tab-bar{display:flex;gap:4px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:4px;margin-bottom:20px}
        .tab-btn{flex:1;padding:10px 8px;border:none;background:transparent;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--muted);transition:all .15s;white-space:nowrap}
        .tab-btn.active{background:var(--accent);color:#fff}
        .upload-zone{border:2px dashed var(--border);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
        .upload-zone:hover{border-color:var(--accent);background:var(--accent-light)}
        .upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
        .thumb{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1.5px solid var(--border)}
        .badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}
        .chat-bubble{padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.5;max-width:85%}
        .chat-user{background:var(--accent-light);color:var(--text);margin-left:auto;border-bottom-right-radius:4px}
        .chat-ai{background:var(--card);border:1.5px solid var(--border);color:var(--text);border-bottom-left-radius:4px}
        .pbar{height:8px;border-radius:4px;background:var(--border);overflow:hidden}
        .pfill{height:100%;border-radius:4px;transition:width .3s}
        .fade{animation:fadeIn .3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        @keyframes spin{to{transform:rotate(360deg)}}
        .spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
        .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:600px){.g2{grid-template-columns:1fr}}
      `}</style>

      {/* Header */}
      <div style={{ padding: "20px 20px 0" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 2, background: "var(--text)", color: "#fff", display: "inline-block", padding: "4px 10px", borderRadius: 6, marginBottom: 8 }}>POD × FB ADS</div>
            <h1 style={{ fontSize: 26, fontWeight: 900, lineHeight: 1.1 }}>Push Traffic <span style={{ color: "var(--accent)" }}>Evaluator</span></h1>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <div style={{ background: "var(--text)", color: "#fff", padding: "8px 14px", borderRadius: 10, textAlign: "center" }}><div style={{ fontSize: 18, fontWeight: 900 }}>{winners.length}</div><div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1 }}>WINNERS</div></div>
            <div style={{ background: "var(--accent)", color: "#fff", padding: "8px 14px", borderRadius: 10, textAlign: "center" }}><div style={{ fontSize: 18, fontWeight: 900 }}>{tests.length}</div><div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1 }}>TESTING</div></div>
          </div>
        </div>
        <div className="tab-bar">{tabs.map(t => <button key={t.id} className={`tab-btn ${tab===t.id?"active":""}`} onClick={()=>setTab(t.id)}>{t.icon} {t.label}</button>)}</div>
      </div>

      <div style={{ padding: "0 20px 40px" }}>
        {tab === "evaluate" && <EvalTab winners={winners} losers={losers} patterns={patterns} tests={tests} saveT={saveT} />}
        {tab === "training" && <TrainTab winners={winners} losers={losers} saveW={saveW} saveL={saveL} />}
        {tab === "patterns" && <PatTab patterns={patterns} saveP={saveP} winners={winners} losers={losers} />}
        {tab === "test" && <TestTab tests={tests} saveT={saveT} winners={winners} saveW={saveW} losers={losers} saveL={saveL} />}
      </div>
    </div>
  );
}

// ── Shared helpers ──
const sc = s => s >= 7.5 ? "var(--green)" : s >= 5 ? "var(--gold)" : "var(--red)";
const vStyle = v => v === "GO" ? { bg: "var(--green-light)", c: "var(--green)" } : v === "MAYBE" ? { bg: "var(--gold-light)", c: "var(--gold)" } : { bg: "var(--red-light)", c: "var(--red)" };

function ScoreCard({ result, title, subtitle }) {
  const vs = vStyle(result.verdict);
  return (
    <div className="card" style={{ display: "flex", gap: 20, alignItems: "center" }}>
      <div style={{ textAlign: "center", minWidth: 70 }}>
        <div style={{ fontSize: 34, fontWeight: 900, color: sc(result.finalScore) }}>{result.finalScore?.toFixed(1)}</div>
        <div style={{ fontSize: 12, color: "var(--muted)" }}>/10</div>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 4 }}>
          <span className="badge" style={{ background: vs.bg, color: vs.c }}>{result.verdict}</span>
          <span style={{ fontWeight: 700, fontSize: 14 }}>{title}</span>
        </div>
        {subtitle && <div style={{ fontSize: 13, color: "var(--muted)" }}>{subtitle}</div>}
      </div>
    </div>
  );
}

function ScoringBreakdown({ scoring }) {
  const labels = { topicFit: "🎯 Topic Fit", demandStrength: "💪 Demand", conceptCoherence: "🎨 Concept", noveltyDelight: "✨ Novelty", designExecution: "🖌️ Design", personalizationPower: "🔧 Personal." };
  return (
    <div className="card">
      <div className="label" style={{ marginBottom: 12 }}>📊 CHẤM ĐIỂM — 7 PATTERNS (Rule-based)</div>
      {Object.entries(scoring).map(([key, pat]) => (
        <div key={key} style={{ marginBottom: 16, paddingBottom: 16, borderBottom: "1px solid var(--border)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>
              {labels[key] || key}
              {pat.seasonalMultiplier > 1 && <span style={{ fontSize: 11, color: "var(--gold)", marginLeft: 6 }}>×{pat.seasonalMultiplier} seasonal</span>}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 11, color: "var(--muted)" }}>conf: {(pat.confidence * 100).toFixed(0)}%</span>
              <span style={{ fontSize: 20, fontWeight: 900, color: sc(pat.score) }}>{pat.score}</span>
            </div>
          </div>
          <div className="pbar" style={{ marginBottom: 8 }}><div className="pfill" style={{ width: `${pat.score * 10}%`, background: sc(pat.score) }} /></div>
          {pat.subFactors?.map((sf, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "3px 0 3px 12px", borderLeft: "2px solid var(--border)" }}>
              <span>{sf.name}: <span style={{ color: "var(--muted)" }}>{sf.note}</span></span>
              <span style={{ fontWeight: 700, color: sc(sf.score), minWidth: 40, textAlign: "right" }}>{sf.score}/10</span>
            </div>
          ))}
          {pat.notApplicable?.length > 0 && <div style={{ fontSize: 11, color: "var(--muted)", fontStyle: "italic", marginTop: 4 }}>N/A: {pat.notApplicable.join(", ")}</div>}
        </div>
      ))}
    </div>
  );
}

function DebateChat({ context }) {
  const [msgs, setMsgs] = useState([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const send = async () => {
    if (!input.trim() || loading) return;
    const msg = input.trim(); setInput(""); setMsgs(p => [...p, { role: "user", text: msg }]); setLoading(true);
    try {
      const raw = await callAI([{ role: "user", content: `${context}\n\nUser: ${msg}\n\nTrả lời ngắn gọn bằng tiếng Việt.` }], 1024);
      setMsgs(p => [...p, { role: "ai", text: raw }]);
    } catch { setMsgs(p => [...p, { role: "ai", text: "Lỗi kết nối." }]); }
    setLoading(false);
  };
  return (
    <div className="card">
      <div className="label" style={{ marginBottom: 10 }}>💬 DEBATE VỚI AGENT</div>
      <div style={{ maxHeight: 300, overflowY: "auto", marginBottom: 12 }}>
        {msgs.length === 0 && <div style={{ fontSize: 13, color: "var(--muted)", textAlign: "center", padding: 16 }}>Hỏi tại sao chấm cao/thấp, đề xuất điều chỉnh...</div>}
        {msgs.map((m, i) => <div key={i} style={{ display: "flex", marginBottom: 8 }}><div className={`chat-bubble ${m.role === "user" ? "chat-user" : "chat-ai"}`} style={{ whiteSpace: "pre-wrap" }}>{m.text}</div></div>)}
        {loading && <div style={{ display: "flex" }}><div className="chat-bubble chat-ai"><span className="spinner" style={{ width: 14, height: 14 }} /></div></div>}
      </div>
      <div style={{ display: "flex", gap: 8 }}><input value={input} onChange={e => setInput(e.target.value)} placeholder="Debate..." onKeyDown={e => e.key === "Enter" && send()} style={{ flex: 1 }} /><button className="btn btn-primary btn-sm" onClick={send}>Gửi</button></div>
    </div>
  );
}

// ══════════════════════════════════════════
// TAB: EVALUATE
// ══════════════════════════════════════════
function EvalTab({ winners, losers, patterns, tests, saveT }) {
  const [imgs, setImgs] = useState([]);
  const [name, setName] = useState(""); const [niche, setNiche] = useState(""); const [pt, setPt] = useState(""); const [desc, setDesc] = useState("");
  const [loading, setLoading] = useState(false);
  const [attrs, setAttrs] = useState(null); const [result, setResult] = useState(null);

  const handleFiles = async files => { for (const f of [...files].slice(0, 4 - imgs.length)) { const img = await fileToBase64(f); setImgs(p => [...p, img]); } };

  const analyze = async () => {
    if (!imgs.length && !desc && !name) return;
    setLoading(true); setAttrs(null); setResult(null);
    try {
      const userCtx = `Tên: ${name || "Xem ảnh"}\nNiche: ${niche || "Chưa rõ"}\nProduct type: ${pt || "Chưa rõ"}\nGhi chú: ${desc || "Không"}`;
      const msgContent = [
        ...imgs.map(img => ({ type: "image", source: { type: "base64", media_type: img.mediaType, data: img.base64 } })),
        { type: "text", text: `${EXTRACT_PROMPT}\n\nUser input:\n${userCtx}` }
      ];
      const extracted = await callAIJSON([{ role: "user", content: msgContent }]);
      setAttrs(extracted);
      const scored = scoreProduct(extracted);
      setResult(scored);
    } catch (e) { alert("Lỗi: " + e.message); }
    setLoading(false);
  };

  const reset = () => { setImgs([]); setName(""); setNiche(""); setPt(""); setDesc(""); setAttrs(null); setResult(null); };
  const addToTest = async () => {
    if (!result || !attrs) return;
    await saveT([...tests, { id: Date.now().toString(), name: attrs.title || name, niche: attrs.niche || niche, productType: attrs.productType || pt, score: result.finalScore, verdict: result.verdict, addedAt: new Date().toISOString(), status: "testing" }]);
    alert("Đã đưa vào Test!");
  };

  return (
    <div className="fade">
      {!result ? (
        <div className="card">
          <div className="label" style={{ marginBottom: 12 }}>🔍 ĐÁNH GIÁ PRODUCT MỚI</div>
          <div className="upload-zone" style={{ marginBottom: 16 }}>
            <input type="file" accept="image/*" multiple onChange={e => handleFiles(e.target.files)} />
            {imgs.length ? <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>{imgs.map((img, i) => <div key={i} style={{ position: "relative" }}><img src={`data:${img.mediaType};base64,${img.base64}`} className="thumb" /><button onClick={e => { e.stopPropagation(); setImgs(p => p.filter((_, j) => j !== i)); }} style={{ position: "absolute", top: -6, right: -6, background: "var(--red)", color: "#fff", border: "none", borderRadius: "50%", width: 20, height: 20, fontSize: 10, cursor: "pointer" }}>✕</button></div>)}</div> : <div><div style={{ fontSize: 32, marginBottom: 4 }}>📷</div><div style={{ fontSize: 13, color: "var(--muted)" }}>Upload ảnh mockup/design (tối đa 4)</div></div>}
          </div>
          <div className="g2" style={{ marginBottom: 12 }}>
            <div><div className="label">Tên sản phẩm</div><input value={name} onChange={e => setName(e.target.value)} placeholder="VD: Funny nurse cat mug..." /></div>
            <div><div className="label">Product Type</div><input value={pt} onChange={e => setPt(e.target.value)} placeholder="Mug, Canvas, Puzzle..." /></div>
          </div>
          <div style={{ marginBottom: 12 }}><div className="label">Niche</div><input value={niche} onChange={e => setNiche(e.target.value)} placeholder="Mother's Day, Dad, Couple..." /></div>
          <div style={{ marginBottom: 16 }}><div className="label">Ghi chú</div><textarea value={desc} onChange={e => setDesc(e.target.value)} rows={2} placeholder="Mô tả thêm..." /></div>
          <button className="btn btn-primary" style={{ width: "100%", padding: 14 }} onClick={analyze} disabled={loading}>
            {loading ? <><span className="spinner" style={{ marginRight: 8 }} /> AI đang extract attributes...</> : "🔍 Phân tích & Chấm điểm"}
          </button>
        </div>
      ) : (
        <div className="fade">
          <button className="btn btn-outline btn-sm" onClick={reset} style={{ marginBottom: 12 }}>← Đánh giá mới</button>
          <ScoreCard result={result} title={attrs?.title || name} subtitle={`${attrs?.productType} · ${attrs?.niche} · ${attrs?.artStyle}`} />

          <div className="card">
            <div className="label" style={{ marginBottom: 10 }}>📋 THUỘC TÍNH (AI extracted)</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, fontSize: 13 }}>
              {attrs && Object.entries(attrs).filter(([, v]) => v && v !== "unknown" && v !== "n/a").map(([k, v]) => <div key={k}><span style={{ color: "var(--muted)", fontWeight: 600 }}>{k}:</span> {v}</div>)}
            </div>
          </div>

          <ScoringBreakdown scoring={result.scoring} />

          <DebateChat context={`Product: "${attrs?.title}". Attributes: ${JSON.stringify(attrs)}. Scoring: ${JSON.stringify(result.scoring)}. Final: ${result.finalScore}. Verdict: ${result.verdict}. Scoring là RULE-BASED deterministic từ attributes. Nếu user muốn đổi điểm, hãy giải thích attribute nào cần thay đổi.`} />

          <div style={{ display: "flex", gap: 8 }}>
            {(result.verdict === "GO" || result.verdict === "MAYBE") && <button className="btn btn-primary" style={{ flex: 1 }} onClick={addToTest}>🧪 Đưa vào Test</button>}
            <button className="btn btn-outline" style={{ flex: 1 }} onClick={reset}>🔄 Đánh giá mới</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════
// TAB: TRAINING
// ══════════════════════════════════════════
function TrainTab({ winners, losers, saveW, saveL }) {
  const [mode, setMode] = useState("winner");
  const [imgs, setImgs] = useState([]);
  const [name, setName] = useState(""); const [niche, setNiche] = useState(""); const [pt, setPt] = useState("");
  const [sales, setSales] = useState(""); const [peakM, setPeakM] = useState(""); const [peakY, setPeakY] = useState(""); const [notes, setNotes] = useState("");
  const [loading, setLoading] = useState(false);
  const [attrs, setAttrs] = useState(null); const [result, setResult] = useState(null);
  const [viewList, setViewList] = useState(null);

  const handleFiles = async files => { for (const f of [...files].slice(0, 4 - imgs.length)) { const img = await fileToBase64(f); setImgs(p => [...p, img]); } };
  const reset = () => { setImgs([]); setName(""); setNiche(""); setPt(""); setSales(""); setPeakM(""); setPeakY(""); setNotes(""); setAttrs(null); setResult(null); };

  const analyze = async () => {
    if (!imgs.length && !name) return;
    setLoading(true); setAttrs(null); setResult(null); setAiAnalysis("");
    try {
      // Step 1: AI extract attributes
      const userCtx = `Tên: ${name || "Xem ảnh"}\nNiche: ${niche || "?"}\nProduct type: ${pt || "?"}\nGhi chú: ${notes || "Không"}`;
      const msgContent = [
        ...imgs.map(img => ({ type: "image", source: { type: "base64", media_type: img.mediaType, data: img.base64 } })),
        { type: "text", text: `${EXTRACT_PROMPT}\n\nUser input:\n${userCtx}` }
      ];
      const extracted = await callAIJSON([{ role: "user", content: msgContent }]);
      setAttrs(extracted);

      // Step 2: Rule-based scoring (deterministic)
      const scored = scoreProduct(extracted);
      setResult(scored);
    } catch (e) { alert("Lỗi: " + e.message); }
    setLoading(false);
  };

  const save = async () => {
    if (!result || !attrs) return;
    const item = {
      id: Date.now().toString(), name: attrs.title || name, niche: attrs.niche || niche, productType: attrs.productType || pt,
      totalSales: sales ? parseInt(sales) : null, peakMonth: peakM || null, peakYear: peakY || null, notes,
      attrs, scoring: result.scoring, finalScore: result.finalScore,
      addedAt: new Date().toISOString(),
    };
    if (mode === "winner") await saveW([...winners, item]); else await saveL([...losers, item]);
    reset(); alert(`Đã lưu ${mode}!`);
  };

  const del = async (id, type) => { if (type === "winner") await saveW(winners.filter(w => w.id !== id)); else await saveL(losers.filter(l => l.id !== id)); };

  return (
    <div className="fade">
      <div className="g2" style={{ marginBottom: 16 }}>
        <div onClick={() => { setMode("winner"); reset(); setViewList(null); }} className="card" style={{ cursor: "pointer", borderColor: mode === "winner" ? "var(--green)" : "var(--border)", background: mode === "winner" ? "var(--green-light)" : "var(--card)", textAlign: "center", padding: 14 }}>
          <div style={{ fontSize: 20 }}>🏆</div><div style={{ fontWeight: 700, fontSize: 14 }}>Thêm Winner</div><div style={{ fontSize: 11, color: "var(--muted)" }}>Sản phẩm bán được</div>
        </div>
        <div onClick={() => { setMode("loser"); reset(); setViewList(null); }} className="card" style={{ cursor: "pointer", borderColor: mode === "loser" ? "var(--red)" : "var(--border)", background: mode === "loser" ? "var(--red-light)" : "var(--card)", textAlign: "center", padding: 14 }}>
          <div style={{ fontSize: 20 }}>💀</div><div style={{ fontWeight: 700, fontSize: 14 }}>Thêm Loser</div><div style={{ fontSize: 11, color: "var(--muted)" }}>Sản phẩm thất bại</div>
        </div>
      </div>

      {!result && !viewList && (
        <div className="card">
          <div className="label" style={{ marginBottom: 12 }}>{mode === "winner" ? "🏆 PHÂN TÍCH WINNER" : "💀 PHÂN TÍCH LOSER"}</div>
          <div className="upload-zone" style={{ marginBottom: 16 }}>
            <input type="file" accept="image/*" multiple onChange={e => handleFiles(e.target.files)} />
            {imgs.length ? <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>{imgs.map((img, i) => <div key={i} style={{ position: "relative" }}><img src={`data:${img.mediaType};base64,${img.base64}`} className="thumb" /><button onClick={e => { e.stopPropagation(); setImgs(p => p.filter((_, j) => j !== i)); }} style={{ position: "absolute", top: -6, right: -6, background: "var(--red)", color: "#fff", border: "none", borderRadius: "50%", width: 20, height: 20, fontSize: 10, cursor: "pointer" }}>✕</button></div>)}</div> : <div><div style={{ fontSize: 28, marginBottom: 4 }}>🖼️</div><div style={{ fontSize: 13, color: "var(--muted)" }}>Upload ảnh product</div></div>}
          </div>
          <div style={{ marginBottom: 12 }}><div className="label">Tên sản phẩm *</div><input value={name} onChange={e => setName(e.target.value)} placeholder="VD: Mother Daughter Love Tree Canvas..." /></div>
          <div className="g2" style={{ marginBottom: 12 }}>
            <div><div className="label">Niche</div><input value={niche} onChange={e => setNiche(e.target.value)} placeholder="mother's day, couple..." /></div>
            <div><div className="label">Product Type</div><input value={pt} onChange={e => setPt(e.target.value)} placeholder="mug, canvas..." /></div>
          </div>
          {mode === "winner" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginBottom: 12 }}>
              <div><div className="label">Total Sales</div><input type="number" value={sales} onChange={e => setSales(e.target.value)} placeholder="23000" /></div>
              <div><div className="label">Tháng Peak</div><input value={peakM} onChange={e => setPeakM(e.target.value)} placeholder="5" /></div>
              <div><div className="label">Năm Peak</div><input value={peakY} onChange={e => setPeakY(e.target.value)} placeholder="2024" /></div>
            </div>
          )}
          <div style={{ marginBottom: 16 }}><div className="label">Ghi chú</div><textarea value={notes} onChange={e => setNotes(e.target.value)} rows={2} placeholder={mode === "winner" ? "Insight, lý do thành công..." : "Lý do thất bại..."} /></div>
          <button className="btn btn-primary" style={{ width: "100%", padding: 14 }} onClick={analyze} disabled={loading}>
            {loading ? <><span className="spinner" style={{ marginRight: 8 }} /> Đang phân tích...</> : `🔬 Phân tích ${mode === "winner" ? "Winner" : "Loser"}`}
          </button>
        </div>
      )}

      {result && !viewList && (
        <div className="fade">
          <button className="btn btn-outline btn-sm" onClick={reset} style={{ marginBottom: 12 }}>← Quay lại</button>
          <ScoreCard result={result} title={attrs?.title || name} subtitle={`${attrs?.productType} · ${attrs?.niche} · ${attrs?.artStyle}`} />

          <div className="card">
            <div className="label" style={{ marginBottom: 10 }}>📋 THUỘC TÍNH (AI extracted)</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, fontSize: 12 }}>
              {attrs && Object.entries(attrs).filter(([, v]) => v && v !== "unknown" && v !== "n/a" && v !== "null").map(([k, v]) => <div key={k}><span style={{ color: "var(--muted)", fontWeight: 600 }}>{k}:</span> {String(v)}</div>)}
            </div>
          </div>

          <ScoringBreakdown scoring={result.scoring} />

          <DebateChat context={`Đang phân tích ${mode}: "${attrs?.title}". Attrs: ${JSON.stringify(attrs)}. Score: ${JSON.stringify(result.scoring)}. Final: ${result.finalScore}. Scoring là RULE-BASED deterministic. Nếu user muốn hiểu tại sao điểm cao/thấp, giải thích dựa trên attributes và rubric. Nếu user hỏi "tại sao bán được" hoặc "tại sao thất bại", hãy phân tích dựa trên scoring.`} />

          <button className="btn btn-primary" style={{ width: "100%", padding: 14, marginTop: 8 }} onClick={save}>✅ Lưu {mode === "winner" ? "Winner" : "Loser"}</button>
        </div>
      )}

      {!result && (
        <div style={{ marginTop: 16 }}>
          <div className="g2" style={{ marginBottom: 12 }}>
            <button className="btn btn-outline" onClick={() => setViewList(viewList === "winners" ? null : "winners")}>🏆 Winners ({winners.length})</button>
            <button className="btn btn-outline" onClick={() => setViewList(viewList === "losers" ? null : "losers")}>💀 Losers ({losers.length})</button>
          </div>
          {viewList && (
            <div className="card fade">
              <div className="label" style={{ marginBottom: 10 }}>{viewList === "winners" ? "🏆" : "💀"} {viewList.toUpperCase()} ({viewList === "winners" ? winners.length : losers.length})</div>
              {(viewList === "winners" ? winners : losers).length === 0 ? <div style={{ textAlign: "center", color: "var(--muted)", padding: 20 }}>Chưa có.</div> :
                (viewList === "winners" ? winners : losers).map(w => (
                  <div key={w.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 0", borderBottom: "1px solid var(--border)" }}>
                    <div><div style={{ fontWeight: 700, fontSize: 13 }}>{w.name}</div><div style={{ fontSize: 11, color: "var(--muted)" }}>{w.niche} · {w.productType} {w.totalSales ? `· ${w.totalSales} sales` : ""} {w.finalScore ? `· ${w.finalScore.toFixed(1)}/10` : ""}</div></div>
                    <button onClick={() => del(w.id, viewList === "winners" ? "winner" : "loser")} style={{ background: "none", border: "none", cursor: "pointer" }}>🗑️</button>
                  </div>
                ))
              }
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════
// TAB: PATTERNS
// ══════════════════════════════════════════
function PatTab({ patterns, saveP, winners, losers }) {
  const [loading, setLoading] = useState(false);
  const extract = async () => {
    if (winners.length + losers.length < 2) { alert("Cần ít nhất 2 winners/losers."); return; }
    setLoading(true);
    try {
      const ctx = [...winners.slice(0, 20).map(w => `WIN: "${w.name}" | ${w.niche} | ${w.productType} | sales:${w.totalSales || "?"} | score:${w.finalScore || "?"}`), ...losers.slice(0, 10).map(l => `LOSE: "${l.name}" | ${l.niche} | ${l.productType} | score:${l.finalScore || "?"}`)].join("\n");
      const existing = patterns.map(p => `- ${p.text}`).join("\n") || "Chưa có";
      const result = await callAIJSON([{ role: "user", content: `Data:\n${ctx}\n\nExisting:\n${existing}\n\nRút patterns MỚI (không trùng). JSON: {"patterns":[{"text":"...","category":"market|design|timing|audience|product","confidence":50-95,"evidence":"..."}]}` }]);
      if (result.patterns?.length) await saveP([...patterns, ...result.patterns.map(p => ({ ...p, id: Date.now() + Math.random(), enabled: true }))]);
    } catch (e) { alert("Lỗi: " + e.message); }
    setLoading(false);
  };

  return (
    <div className="fade">
      <div className="card">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <div><div className="label">📊 PATTERNS</div><div style={{ fontSize: 12, color: "var(--muted)" }}>Rút từ winners/losers</div></div>
          <button className="btn btn-primary btn-sm" onClick={extract} disabled={loading}>{loading ? "Đang rút..." : "🧠 Rút Patterns"}</button>
        </div>

        <div style={{ background: "var(--bg)", borderRadius: 10, padding: 12, marginBottom: 16, fontSize: 12 }}>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>⚙️ Scoring Engine: RULE-BASED (deterministic)</div>
          <div style={{ color: "var(--muted)" }}>Cùng product → cùng attributes → cùng điểm số. AI chỉ extract attributes, JS tính điểm.</div>
        </div>

        <div style={{ background: "var(--bg)", borderRadius: 10, padding: 12, marginBottom: 16, fontSize: 12 }}>
          <div style={{ fontWeight: 700, marginBottom: 6 }}>Trọng số mặc định:</div>
          {Object.entries(getWeightsForProduct(null)).map(([k, v]) => <span key={k} style={{ marginRight: 12 }}>{k}: <strong>{(v * 100).toFixed(0)}%</strong></span>)}
        </div>

        {patterns.length === 0 ? <div style={{ textAlign: "center", color: "var(--muted)", padding: 30 }}>Chưa có. Thêm winners/losers rồi rút patterns.</div> :
          patterns.map(p => (
            <div key={p.id} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "12px 0", borderBottom: "1px solid var(--border)", opacity: p.enabled === false ? 0.4 : 1 }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", gap: 6, marginBottom: 4 }}>
                  <span style={{ fontSize: 10, fontWeight: 700, background: "var(--blue-light)", color: "var(--blue)", padding: "2px 8px", borderRadius: 10 }}>{p.category}</span>
                  <span style={{ fontSize: 10, color: "var(--muted)" }}>{p.confidence}%</span>
                </div>
                <div style={{ fontSize: 13 }}>{p.text}</div>
                {p.evidence && <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>{p.evidence}</div>}
              </div>
              <div style={{ display: "flex", gap: 4 }}>
                <button onClick={async () => await saveP(patterns.map(x => x.id === p.id ? { ...x, enabled: !x.enabled } : x))} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 16 }}>{p.enabled !== false ? "✅" : "⬜"}</button>
                <button onClick={async () => await saveP(patterns.filter(x => x.id !== p.id))} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 14 }}>🗑️</button>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  );
}

// ══════════════════════════════════════════
// TAB: TEST
// ══════════════════════════════════════════
function TestTab({ tests, saveT, winners, saveW, losers, saveL }) {
  const [editId, setEditId] = useState(null);
  const [spend, setSpend] = useState(""); const [rev, setRev] = useState(""); const [orders, setOrders] = useState("");

  const update = async id => {
    const updated = tests.map(t => {
      if (t.id !== id) return t;
      const s = spend ? parseFloat(spend) : t.spend || 0;
      const r = rev ? parseFloat(rev) : t.revenue || 0;
      return { ...t, spend: s, revenue: r, orders: orders ? parseInt(orders) : t.orders || 0, roas: s > 0 ? (r / s).toFixed(2) : "0" };
    });
    await saveT(updated); setEditId(null); setSpend(""); setRev(""); setOrders("");
  };

  const mark = async (id, v) => {
    const item = tests.find(t => t.id === id);
    await saveT(tests.map(t => t.id === id ? { ...t, verdict: v, status: v === "win" ? "won" : "lost" } : t));
    const ti = { id: Date.now().toString(), name: item.name, niche: item.niche, productType: item.productType, notes: `Test: spend ${item.spend || "?"}, rev ${item.revenue || "?"}`, addedAt: new Date().toISOString() };
    if (v === "win") await saveW([...winners, ti]); else await saveL([...losers, ti]);
  };

  const stats = { total: tests.length, won: tests.filter(t => t.verdict === "win").length, lost: tests.filter(t => t.verdict === "lose").length, testing: tests.filter(t => !t.verdict).length };

  return (
    <div className="fade">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 16 }}>
        {[{ l: "Total", v: stats.total, c: "var(--text)" }, { l: "Won", v: stats.won, c: "var(--green)" }, { l: "Lost", v: stats.lost, c: "var(--red)" }, { l: "Testing", v: stats.testing, c: "var(--gold)" }].map(s => (
          <div key={s.l} className="card" style={{ textAlign: "center", padding: 12 }}><div style={{ fontSize: 22, fontWeight: 900, color: s.c }}>{s.v}</div><div style={{ fontSize: 10, fontWeight: 700, color: "var(--muted)", letterSpacing: 1 }}>{s.l.toUpperCase()}</div></div>
        ))}
      </div>

      {tests.length === 0 ? <div className="card" style={{ textAlign: "center", color: "var(--muted)", padding: 30 }}>Chưa có test. Đánh giá product → "Đưa vào Test".</div> :
        tests.map(t => (
          <div key={t.id} className="card" style={{ borderLeftWidth: 4, borderLeftColor: t.verdict === "win" ? "var(--green)" : t.verdict === "lose" ? "var(--red)" : "var(--gold)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
              <div><div style={{ fontWeight: 700, fontSize: 14 }}>{t.name}</div><div style={{ fontSize: 11, color: "var(--muted)" }}>{t.niche} · {t.productType} · Score: {t.score?.toFixed?.(1) || "?"}</div></div>
              <span className="badge" style={{ background: t.verdict === "win" ? "var(--green-light)" : t.verdict === "lose" ? "var(--red-light)" : "var(--gold-light)", color: t.verdict === "win" ? "var(--green)" : t.verdict === "lose" ? "var(--red)" : "var(--gold)" }}>{t.verdict === "win" ? "WON" : t.verdict === "lose" ? "LOST" : "TESTING"}</span>
            </div>
            {(t.spend || t.revenue) && <div style={{ fontSize: 12, color: "var(--muted)", marginBottom: 8 }}>Spend: ${t.spend || 0} · Revenue: ${t.revenue || 0} · ROAS: {t.roas || "?"} · Orders: {t.orders || 0}</div>}
            {editId === t.id ? (
              <div className="fade" style={{ marginTop: 8 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginBottom: 8 }}>
                  <div><div className="label">Spend ($)</div><input type="number" value={spend} onChange={e => setSpend(e.target.value)} /></div>
                  <div><div className="label">Revenue ($)</div><input type="number" value={rev} onChange={e => setRev(e.target.value)} /></div>
                  <div><div className="label">Orders</div><input type="number" value={orders} onChange={e => setOrders(e.target.value)} /></div>
                </div>
                <div style={{ display: "flex", gap: 8 }}><button className="btn btn-primary btn-sm" onClick={() => update(t.id)}>💾 Lưu</button><button className="btn btn-outline btn-sm" onClick={() => setEditId(null)}>Hủy</button></div>
              </div>
            ) : (
              <div style={{ display: "flex", gap: 6 }}>
                <button className="btn btn-outline btn-sm" onClick={() => setEditId(t.id)}>📝 Cập nhật</button>
                {!t.verdict && <><button className="btn btn-sm" style={{ background: "var(--green)", color: "#fff" }} onClick={() => mark(t.id, "win")}>✅ Win</button><button className="btn btn-sm" style={{ background: "var(--red)", color: "#fff" }} onClick={() => mark(t.id, "lose")}>❌ Lose</button></>}
                <button onClick={async () => await saveT(tests.filter(x => x.id !== t.id))} style={{ background: "none", border: "none", cursor: "pointer", marginLeft: "auto" }}>🗑️</button>
              </div>
            )}
          </div>
        ))
      }
    </div>
  );
}