const { useState: useStateSwot, useEffect: useEffectSwot } = React;

// ============================================================
// MOCK DATA — EN / AR
// ============================================================
const MOCK_SWOT_EN = {
  strengths: [
    'Luxury waterfront inventory in Pearl & Lusail outperforms city average by 18% on viewing-to-offer conversion',
    'Bilingual (EN/AR) AI assistant reducing first-response time from 4h 20m to under 90 seconds',
    'Returning-customer rate of 43% — strongest in Doha premium segment',
    'Mortgage calculator adoption at 67% of buy-intent leads is accelerating qualified pipeline',
    'Average response quality score 4.6/5 across 247 conversations this month',
  ],
  weaknesses: [
    'Al Rayyan and Al Waab inventory sitting on market 42% longer than premium areas',
    'Only 22% of leads complete the viewing step — clear drop-off after property recommendation',
    '5 high-value leads (>QAR 8M budget) went cold without a follow-up call this week',
    'No weekend agent coverage — 31 leads received zero response on Sat/Sun',
    'Arabic conversations converting at 12% vs 24% for English — translation or cultural-fit gap',
  ],
  opportunities: [
    'Qatari Airways employee segment growing 28% MoM — tailored discount messaging could unlock more',
    'Gewan Island pre-launch interest 3.2× baseline — prepare exclusive pre-sale campaign',
    '14 leads mentioned "schools nearby" — add education-proximity filter to property recommendations',
    'Peak message volume 6–9 PM suggests expanding agent coverage during prime-time yields 2–3× reach',
    'Requests for furnished studios up 41% — rebalance inventory acquisition toward short-term rental segment',
  ],
  threats: [
    'Competitor B launched mortgage-subsidy offer that is attracting 3BR buyers in our core demographic',
    '8 leads cited "slow callback from agent" as deal-breaker in post-lost feedback',
    'Gewan Island handover delays surfacing in 4 conversations — risk to Q2 pipeline',
    'Regulatory uncertainty around Pearl freehold for non-GCC citizens mentioned 11 times',
    'Mortgage rate hike of 0.75% this quarter dampening inquiries in 2M–4M QAR price band',
  ],
  executiveBrief: "Premium waterfront segments are firing on all cylinders — Pearl and Lusail Marina are driving 68% of qualified pipeline with strong conversion metrics. The AI assistant has compressed response time dramatically, giving the sales floor breathing room to focus on closing. Concerns cluster around mid-tier areas (Rayyan, Waab) where inventory is aging, and weekend coverage remains a leaky bucket. Competitor B's mortgage play is starting to bite in the 2–4M QAR band; recommend a counter-offer campaign within two weeks to avoid giving up share in a growth segment. Gewan Island demand is running hot — we need to be ready with a pre-sale strategy to capture it before the handover.",
  keyWins: [
    'Closed 3 villas in Pearl this week totaling QAR 38M',
    'AI assistant first-response time now median 73 seconds',
    '12 leads converted to scheduled viewings in the last 7 days',
  ],
  keyConcerns: [
    'Arabic conversation conversion lagging English by 12 percentage points',
    '5 high-value leads cold with no follow-up',
    'Weekend coverage gap — 31 leads unanswered Sat/Sun',
  ],
  recommendations: [
    'Assign a bilingual agent to own Arabic-language conversations end-to-end for 2 weeks',
    'Implement 1-click "flag for human" on high-value leads in the AI chat',
    'Add weekend rotation with at least one on-call agent until 8 PM',
    'Launch Gewan Island pre-sale waitlist capture on the public site',
    'Counter Competitor B with a 0.5%-down mortgage cashback for Q2',
  ],
};

const MOCK_SWOT_AR = {
  strengths: [
    'العقارات الفاخرة على الواجهة البحرية في اللؤلؤة ولوسيل تتفوق على متوسط المدينة بنسبة 18٪ في تحويل المعاينة إلى عرض',
    'المساعد الذكي ثنائي اللغة (إنجليزي/عربي) يقلل زمن الاستجابة الأول من 4 ساعات و20 دقيقة إلى أقل من 90 ثانية',
    'معدل العملاء العائدين 43٪ — الأقوى في شريحة الدوحة الفاخرة',
    'اعتماد حاسبة الرهن العقاري عند 67٪ من عملاء الشراء يسرّع خط السير المؤهل',
    'متوسط جودة الاستجابة 4.6/5 عبر 247 محادثة هذا الشهر',
  ],
  weaknesses: [
    'عقارات الريان والوعب تجلس في السوق 42٪ أطول من المناطق الفاخرة',
    'فقط 22٪ من العملاء يكملون خطوة المعاينة — انخفاض واضح بعد توصية العقار',
    '5 عملاء ذوو قيمة عالية (ميزانية >8 مليون ر.ق) أصبحوا باردين بدون مكالمة متابعة هذا الأسبوع',
    'لا يوجد تغطية وكلاء في عطلة نهاية الأسبوع — 31 عميلاً لم يتلقوا أي رد يوم السبت/الأحد',
    'المحادثات العربية تتحول بنسبة 12٪ مقابل 24٪ للإنجليزية — فجوة في الترجمة أو الملاءمة الثقافية',
  ],
  opportunities: [
    'شريحة موظفي الخطوط الجوية القطرية تنمو 28٪ شهرياً — رسائل خصم مخصصة قد تفتح المزيد',
    'اهتمام ما قبل الإطلاق بجزيرة قيوان 3.2× عن الأساس — جهّز حملة بيع مسبق حصرية',
    '14 عميلاً ذكروا "مدارس قريبة" — أضف فلتر القرب من التعليم لتوصيات العقارات',
    'ذروة حجم الرسائل 6-9 مساءً تشير إلى أن توسيع تغطية الوكلاء في ساعات الذروة يعطي وصولاً 2-3×',
    'طلبات الاستوديوهات المفروشة ارتفعت 41٪ — أعد توازن الاستحواذ نحو شريحة الإيجار قصير المدى',
  ],
  threats: [
    'المنافس B أطلق عرض دعم الرهن العقاري الذي يجذب مشتري الثلاث غرف في شريحتنا الأساسية',
    '8 عملاء ذكروا "بطء المعاودة من الوكيل" كعامل حاسم في التغذية الراجعة بعد الفقدان',
    'تأخيرات تسليم جزيرة قيوان تظهر في 4 محادثات — خطر على خط سير الربع الثاني',
    'عدم اليقين التنظيمي حول التملك الحر في اللؤلؤة لغير مواطني مجلس التعاون ذُكر 11 مرة',
    'رفع سعر الفائدة العقارية 0.75٪ هذا الربع يخفف الاستفسارات في نطاق 2-4 مليون ر.ق',
  ],
  executiveBrief: "قطاعات الواجهة البحرية الفاخرة تعمل بكامل طاقتها — اللؤلؤة ومارينا لوسيل تقود 68٪ من خط السير المؤهل بمقاييس تحويل قوية. ضغط المساعد الذكي زمن الاستجابة بشكل كبير، مما أعطى فريق المبيعات مساحة للتركيز على الإغلاق. تتركز المخاوف في المناطق المتوسطة (الريان، الوعب) حيث المخزون يتقادم، وتظل تغطية نهاية الأسبوع ثغرة. لعبة الرهن لدى المنافس B بدأت تؤثر في نطاق 2-4 مليون ر.ق؛ نوصي بحملة عرض مضاد خلال أسبوعين لتجنب خسارة الحصة في قطاع نمو. الطلب على جزيرة قيوان ساخن — يجب أن نكون جاهزين بإستراتيجية بيع مسبق لاقتناصه قبل التسليم.",
  keyWins: [
    'أغلقنا 3 فلل في اللؤلؤة هذا الأسبوع بإجمالي 38 مليون ر.ق',
    'زمن الاستجابة الأول للمساعد الذكي الآن 73 ثانية متوسط',
    '12 عميلاً تحوّلوا إلى معاينات مجدولة في آخر 7 أيام',
  ],
  keyConcerns: [
    'تحويل المحادثات العربية متأخر عن الإنجليزية بـ 12 نقطة مئوية',
    '5 عملاء ذوي قيمة عالية باردون بدون متابعة',
    'فجوة تغطية عطلة نهاية الأسبوع — 31 عميلاً بدون رد السبت/الأحد',
  ],
  recommendations: [
    'كلّف وكيلاً ثنائي اللغة بامتلاك المحادثات العربية بالكامل لمدة أسبوعين',
    'طبّق خيار "إحالة إلى إنسان" بنقرة واحدة للعملاء ذوي القيمة العالية في شات الذكاء الاصطناعي',
    'أضف دوران نهاية الأسبوع مع وكيل واحد على الأقل حتى 8 مساءً',
    'أطلق التقاط قائمة انتظار البيع المسبق لجزيرة قيوان على الموقع العام',
    'قابل المنافس B بعرض استرداد 0.5٪ من الدفعة الأولى للرهن للربع الثاني',
  ],
};

const MOCK_SWOT = () => (window.__lang === 'ar' ? MOCK_SWOT_AR : MOCK_SWOT_EN);

const MOCK_NON_BOOKING_REASONS_EN = [
  { reason: 'Budget below available inventory in preferred area', count: 23, details: [
    { phone: '+97433XXX421', summary: 'Wanted 2BR in West Bay under QAR 9k — our minimum is QAR 11k' },
    { phone: '+97455XXX812', summary: 'Asked about 1BR Pearl at QAR 7k; nothing available in range' },
    { phone: '+97444XXX090', summary: 'Studio Lusail Marina at QAR 5k — all our studios start at QAR 6.5k' },
  ]},
  { reason: 'Customer wanted immediate availability, none matched', count: 18, details: [
    { phone: '+97466XXX501', summary: 'Needed move-in by weekend; earliest available was 3 weeks out' },
    { phone: '+97433XXX204', summary: 'Relocation from abroad — immediate handover required' },
  ]},
  { reason: 'Competitor offer at lower price', count: 14, details: [
    { phone: '+97455XXX199', summary: 'Mentioned Al Hazm Properties offering similar unit 8% cheaper' },
    { phone: '+97477XXX633', summary: 'Broker sent matching listing at QAR 1.9M vs our QAR 2.1M' },
  ]},
  { reason: 'Requested furnished option not available', count: 11 },
  { reason: 'School proximity did not match preference', count: 9 },
  { reason: 'Parking count insufficient (needed 2+)', count: 7 },
  { reason: 'Lease term flexibility not possible', count: 6 },
  { reason: 'Wanted maid\'s room in smaller apartment', count: 5 },
  { reason: 'Pet policy restrictions', count: 4 },
  { reason: 'Delivery timeline too long (off-plan)', count: 3 },
];
const MOCK_NON_BOOKING_REASONS_AR = [
  { reason: 'الميزانية أقل من المعروض في المنطقة المفضلة', count: 23, details: [
    { phone: '+97433XXX421', summary: 'يريد غرفتين في الخليج الغربي أقل من 9 آلاف ر.ق — الحد الأدنى لدينا 11 ألفاً' },
    { phone: '+97455XXX812', summary: 'سأل عن غرفة واحدة في اللؤلؤة بـ 7 آلاف ر.ق؛ لا يوجد ضمن النطاق' },
    { phone: '+97444XXX090', summary: 'استوديو في مارينا لوسيل بـ 5 آلاف — كل استوديوهاتنا تبدأ من 6.5 ألف' },
  ]},
  { reason: 'العميل أراد توفراً فورياً ولم يتطابق شيء', count: 18, details: [
    { phone: '+97466XXX501', summary: 'يحتاج الانتقال بنهاية الأسبوع؛ أقرب متاح بعد 3 أسابيع' },
    { phone: '+97433XXX204', summary: 'انتقال من الخارج — التسليم الفوري مطلوب' },
  ]},
  { reason: 'عرض منافس بسعر أقل', count: 14, details: [
    { phone: '+97455XXX199', summary: 'ذكر أن عقارات الحزم تعرض وحدة مشابهة أرخص بـ 8٪' },
    { phone: '+97477XXX633', summary: 'الوسيط أرسل إعلاناً مطابقاً بـ 1.9 مليون مقابل 2.1 مليون لدينا' },
  ]},
  { reason: 'طلب خيار مفروش غير متوفر', count: 11 },
  { reason: 'القرب من المدارس لم يطابق التفضيل', count: 9 },
  { reason: 'عدد المواقف غير كافٍ (يحتاج 2+)', count: 7 },
  { reason: 'مرونة مدة العقد غير ممكنة', count: 6 },
  { reason: 'أراد غرفة خادمة في شقة أصغر', count: 5 },
  { reason: 'قيود سياسة الحيوانات الأليفة', count: 4 },
  { reason: 'جدول زمني للتسليم طويل جداً (خارج الخطة)', count: 3 },
];
const MOCK_NON_BOOKING_REASONS = () => (window.__lang === 'ar' ? MOCK_NON_BOOKING_REASONS_AR : MOCK_NON_BOOKING_REASONS_EN);

const MOCK_ALERTS_EN = [
  { id: 'a1', status: 'pending', severity: 'high',     alert_type: 'high_value_at_risk', phone: '+97433XXX901', reason: 'QAR 14M villa lead went silent after pricing sent 3 days ago — Pearl Isola Dana', created_at: new Date(Date.now() - 12*3600000) },
  { id: 'a2', status: 'pending', severity: 'high',     alert_type: 'complaint',          phone: '+97455XXX445', reason: 'Customer reported second broken viewing appointment, threatening to cancel',        created_at: new Date(Date.now() - 4*3600000) },
  { id: 'a3', status: 'pending', severity: 'medium',   alert_type: 'unanswered',         phone: '+97444XXX022', reason: 'Unanswered for 18 hours on a hot buy lead (Lusail Marina 3BR, QAR 4.2M)',        created_at: new Date(Date.now() - 18*3600000) },
  { id: 'a4', status: 'pending', severity: 'medium',   alert_type: 'stale_pipeline',     phone: '+97466XXX733', reason: 'Lead stuck in viewing-scheduled stage for 11 days without progression',          created_at: new Date(Date.now() - 2*86400000) },
  { id: 'a5', status: 'pending', severity: 'low',      alert_type: 'quality_issue',      phone: '+97477XXX581', reason: 'AI gave incorrect availability for Pearl unit FN-2B-001 — customer flagged mismatch', created_at: new Date(Date.now() - 6*3600000) },
  { id: 'a6', status: 'acknowledged', severity: 'high', alert_type: 'stage_regression', phone: '+97433XXX410', reason: 'Lead moved from Offer back to Contacted — verify cause',                           created_at: new Date(Date.now() - 3*86400000) },
  { id: 'a7', status: 'acknowledged', severity: 'medium', alert_type: 'unanswered',     phone: '+97455XXX009', reason: 'Was silent 20 hrs — agent reached out, awaiting response',                           created_at: new Date(Date.now() - 26*3600000) },
  { id: 'a8', status: 'resolved', severity: 'high',     alert_type: 'complaint',        phone: '+97466XXX188', reason: 'Resolved — customer accepted refund & rebooked viewing',                              created_at: new Date(Date.now() - 5*86400000) },
  { id: 'a9', status: 'resolved', severity: 'low',      alert_type: 'quality_issue',    phone: '+97477XXX304', reason: 'AI response corrected, lead re-engaged',                                               created_at: new Date(Date.now() - 7*86400000) },
];
const MOCK_ALERTS_AR = [
  { id: 'a1', status: 'pending', severity: 'high',     alert_type: 'high_value_at_risk', phone: '+97433XXX901', reason: 'عميل فيلا بـ 14 مليون ر.ق توقف عن الرد بعد إرسال السعر قبل 3 أيام — إيزولا دانا اللؤلؤة', created_at: new Date(Date.now() - 12*3600000) },
  { id: 'a2', status: 'pending', severity: 'high',     alert_type: 'complaint',          phone: '+97455XXX445', reason: 'العميل أبلغ عن موعد معاينة محطَّم للمرة الثانية ويهدد بالإلغاء',                    created_at: new Date(Date.now() - 4*3600000) },
  { id: 'a3', status: 'pending', severity: 'medium',   alert_type: 'unanswered',         phone: '+97444XXX022', reason: 'بلا رد منذ 18 ساعة على عميل شراء ساخن (مارينا لوسيل 3 غرف، 4.2 مليون ر.ق)',            created_at: new Date(Date.now() - 18*3600000) },
  { id: 'a4', status: 'pending', severity: 'medium',   alert_type: 'stale_pipeline',     phone: '+97466XXX733', reason: 'العميل عالق في مرحلة المعاينة المجدولة منذ 11 يوماً دون تقدم',                          created_at: new Date(Date.now() - 2*86400000) },
  { id: 'a5', status: 'pending', severity: 'low',      alert_type: 'quality_issue',      phone: '+97477XXX581', reason: 'المساعد أعطى توفراً خاطئاً لوحدة اللؤلؤة FN-2B-001 — العميل أشار إلى عدم التطابق', created_at: new Date(Date.now() - 6*3600000) },
  { id: 'a6', status: 'acknowledged', severity: 'high', alert_type: 'stage_regression', phone: '+97433XXX410', reason: 'العميل عاد من مرحلة العرض إلى تم التواصل — تحقق من السبب',                           created_at: new Date(Date.now() - 3*86400000) },
  { id: 'a7', status: 'acknowledged', severity: 'medium', alert_type: 'unanswered',     phone: '+97455XXX009', reason: 'كان صامتاً 20 ساعة — تواصل معه الوكيل، بانتظار الرد',                                  created_at: new Date(Date.now() - 26*3600000) },
  { id: 'a8', status: 'resolved', severity: 'high',     alert_type: 'complaint',        phone: '+97466XXX188', reason: 'تم الحل — العميل قبل استرداد المبلغ وأعاد حجز المعاينة',                               created_at: new Date(Date.now() - 5*86400000) },
  { id: 'a9', status: 'resolved', severity: 'low',      alert_type: 'quality_issue',    phone: '+97477XXX304', reason: 'تم تصحيح رد المساعد، وعاد العميل للتفاعل',                                              created_at: new Date(Date.now() - 7*86400000) },
];
const MOCK_ALERTS_SEED = () => (window.__lang === 'ar' ? MOCK_ALERTS_AR : MOCK_ALERTS_EN);

// 30-day complaint trend with a couple of spikes
const MOCK_COMPLAINT_TRENDS = (() => {
  const days = [];
  for (let i = 29; i >= 0; i--) {
    const d = new Date(Date.now() - i*86400000);
    const dayLabel = d.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
    // occasional spikes
    let count = 0;
    const r = (i * 13 + 7) % 17; // pseudo-random but stable
    if (r < 5) count = 0;
    else if (r < 10) count = 1;
    else if (r < 14) count = 2;
    else count = 3;
    if (i === 2) count = 4; // recent spike
    if (i === 14) count = 5; // mid-month spike
    days.push({ date: dayLabel, count });
  }
  return days;
})();

const AVAILABLE_DATES = (() => {
  const dates = [];
  for (let i = 0; i < 12; i++) {
    const d = new Date(Date.now() - i*7*86400000);
    dates.push(d.toISOString().split('T')[0]);
  }
  return dates;
})();

const SWOT_LABELS_EN = { strengths: 'Strengths', weaknesses: 'Weaknesses', opportunities: 'Opportunities', threats: 'Threats' };
const SWOT_LABELS_AR = { strengths: 'نقاط القوة', weaknesses: 'نقاط الضعف', opportunities: 'الفرص', threats: 'التهديدات' };
const swotLabel = (k) => (window.__lang === 'ar' ? SWOT_LABELS_AR : SWOT_LABELS_EN)[k];

const SWOT_CONFIG = {
  strengths:    { get label() { return swotLabel('strengths'); },    icon: 'trendingUp',    color: '#10b981', bg: 'rgba(16,185,129,0.08)',  border: 'rgba(16,185,129,0.28)' },
  weaknesses:   { get label() { return swotLabel('weaknesses'); },   icon: 'trendingDown',  color: '#ef4444', bg: 'rgba(239,68,68,0.08)',   border: 'rgba(239,68,68,0.28)' },
  opportunities:{ get label() { return swotLabel('opportunities'); },icon: 'lightbulb',     color: '#3b82f6', bg: 'rgba(59,130,246,0.08)',  border: 'rgba(59,130,246,0.28)' },
  threats:      { get label() { return swotLabel('threats'); },      icon: 'alertTriangle', color: '#f59e0b', bg: 'rgba(245,158,11,0.08)',  border: 'rgba(245,158,11,0.28)' },
};

const ALERT_TYPE_LABELS_EN = {
  unanswered: 'Unanswered', stale_pipeline: 'Stale Pipeline', high_value_at_risk: 'High Value',
  complaint: 'Complaint',   stage_regression: 'Regression',  quality_issue: 'Quality Issue'
};
const ALERT_TYPE_LABELS_AR = {
  unanswered: 'بدون رد', stale_pipeline: 'خط سير راكد', high_value_at_risk: 'قيمة عالية',
  complaint: 'شكوى',     stage_regression: 'تراجع',      quality_issue: 'مشكلة جودة'
};
const alertTypeLabel = (k) => (window.__lang === 'ar' ? ALERT_TYPE_LABELS_AR : ALERT_TYPE_LABELS_EN)[k] || k;

const ALERT_TYPE = {
  unanswered:         { get label() { return alertTypeLabel('unanswered'); },         icon: 'clock',           color: '#eab308' },
  stale_pipeline:     { get label() { return alertTypeLabel('stale_pipeline'); },     icon: 'alertTriangle',   color: '#f59e0b' },
  high_value_at_risk: { get label() { return alertTypeLabel('high_value_at_risk'); }, icon: 'target',          color: '#e11d48' },
  complaint:          { get label() { return alertTypeLabel('complaint'); },          icon: 'messageWarning',  color: '#dc2626' },
  stage_regression:   { get label() { return alertTypeLabel('stage_regression'); },   icon: 'trendingDown',    color: '#ea580c' },
  quality_issue:      { get label() { return alertTypeLabel('quality_issue'); },      icon: 'alertOctagon',    color: '#9333ea' },
};
const SEVERITY_LABELS = {
  en: { high: 'HIGH', medium: 'MEDIUM', low: 'LOW' },
  ar: { high: 'عالية', medium: 'متوسطة', low: 'منخفضة' }
};
const severityLabel = (s) => (window.__lang === 'ar' ? SEVERITY_LABELS.ar : SEVERITY_LABELS.en)[s] || s;

const SEVERITY_STYLE = {
  high:   { bg: 'rgba(239,68,68,0.1)',  text: '#b91c1c', border: 'rgba(239,68,68,0.3)' },
  medium: { bg: 'rgba(245,158,11,0.1)', text: '#b45309', border: 'rgba(245,158,11,0.3)' },
  low:    { bg: 'rgba(59,130,246,0.1)', text: '#1d4ed8', border: 'rgba(59,130,246,0.3)' },
};

function fmtDateTime(d) {
  try {
    const date = d instanceof Date ? d : new Date(d);
    return date.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
  } catch { return '—'; }
}

// ============================================================
// SUB-COMPONENTS
// ============================================================
const SwotQuadrant = ({ type, items }) => {
  const cfg = SWOT_CONFIG[type];
  return (
    <div style={{ background: cfg.bg, border: `1px solid ${cfg.border}`, borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '12px 16px', background: cfg.bg, borderBottom: `1px solid ${cfg.border}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ color: cfg.color, display: 'flex' }}><Icon name={cfg.icon} size={18} strokeWidth={1.8} /></span>
        <div style={{ fontSize: 12, fontWeight: 600, color: cfg.color, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{cfg.label}</div>
        <span style={{ marginLeft: 'auto', fontSize: 10, fontFamily: 'var(--mono)', padding: '2px 8px', borderRadius: 999, background: cfg.color, color: 'white', fontWeight: 600 }}>
          {items.length} {window.__t('swot.items')}
        </span>
      </div>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 360, overflowY: 'auto' }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: cfg.color, marginTop: 7, flexShrink: 0 }} />
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: 'var(--fg-1)' }}>{it}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

const ComplaintChart = ({ data }) => {
  const maxCount = Math.max(...data.map(d => d.count), 1);
  const width = 780;
  const height = 160;
  const padding = { top: 10, right: 10, bottom: 26, left: 30 };
  const plotW = width - padding.left - padding.right;
  const plotH = height - padding.top - padding.bottom;
  const barW = plotW / data.length - 2;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 180 }}>
      {/* y-axis ticks */}
      {[0, maxCount / 2, maxCount].map((v, i) => {
        const y = padding.top + plotH - (v / maxCount) * plotH;
        return (
          <g key={i}>
            <line x1={padding.left} x2={width - padding.right} y1={y} y2={y} stroke="var(--line-2)" strokeDasharray="3 3" strokeWidth="0.5" />
            <text x={padding.left - 6} y={y + 3} textAnchor="end" fontSize="10" fill="var(--fg-3)" fontFamily="var(--mono)">{Math.round(v)}</text>
          </g>
        );
      })}
      {/* bars */}
      {data.map((d, i) => {
        const x = padding.left + i * (plotW / data.length) + 1;
        const h = (d.count / maxCount) * plotH;
        const y = padding.top + plotH - h;
        return (
          <g key={i}>
            <rect x={x} y={y} width={barW} height={h} rx={2} fill={d.count > 0 ? '#ef4444' : 'var(--line-2)'} opacity={d.count > 0 ? 0.8 : 0.3} />
            {i % 4 === 0 && (
              <text x={x + barW / 2} y={height - 8} textAnchor="middle" fontSize="9" fill="var(--fg-3)" fontFamily="var(--mono)">{d.date}</text>
            )}
          </g>
        );
      })}
    </svg>
  );
};

// ============================================================
// MAIN COMPONENT
// ============================================================
const Swot = () => {
  const [selectedDate, setSelectedDate] = useStateSwot(AVAILABLE_DATES[0]);
  const [quickFilter, setQuickFilter] = useStateSwot(0);
  const [activeReason, setActiveReason] = useStateSwot(null);
  const [alerts, setAlerts] = useStateSwot(MOCK_ALERTS_SEED());
  // When lang changes, reseed alerts (keeping any status changes via id match)
  useEffectSwot(() => {
    setAlerts(prev => MOCK_ALERTS_SEED().map(a => {
      const p = prev.find(x => x.id === a.id);
      return p ? { ...a, status: p.status } : a;
    }));
  }, [window.__lang]);
  const [alertTab, setAlertTab] = useStateSwot('pending');
  const [showAlerts, setShowAlerts] = useStateSwot(true);
  const [lastRefresh, setLastRefresh] = useStateSwot(new Date());
  const [loading, setLoading] = useStateSwot(false);

  const handleRefresh = () => {
    setLoading(true);
    setTimeout(() => {
      setLastRefresh(new Date());
      setLoading(false);
    }, 600);
  };

  const handleAcknowledge = (id) => {
    setAlerts(prev => prev.map(a => a.id === id ? { ...a, status: 'acknowledged' } : a));
  };
  const handleResolve = (id) => {
    setAlerts(prev => prev.map(a => a.id === id ? { ...a, status: 'resolved' } : a));
  };

  const counts = {
    strengths: MOCK_SWOT().strengths.length,
    weaknesses: MOCK_SWOT().weaknesses.length,
    opportunities: MOCK_SWOT().opportunities.length,
    threats: MOCK_SWOT().threats.length,
  };

  const alertCounts = {
    pending: alerts.filter(a => a.status === 'pending').length,
    acknowledged: alerts.filter(a => a.status === 'acknowledged').length,
    resolved: alerts.filter(a => a.status === 'resolved').length,
  };
  const filteredAlerts = alerts.filter(a => a.status === alertTab).sort((a,b) => new Date(b.created_at) - new Date(a.created_at));

  const QUICK_FILTERS = [
    { label: 'Latest', days: 0 },
    { label: '7d', days: 7 },
    { label: '14d', days: 14 },
    { label: '30d', days: 30 },
  ];

  return (
    <div className="content view" style={{ paddingBottom: 40 }}>
      {/* Header */}
      <div className="section-head">
        <div>
          <div className="sub">{window.__t('swot.sub')}</div>
          <h2>Strategic <em>SWOT</em></h2>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <div className="pill-tabs">
            {QUICK_FILTERS.map(f => (
              <button key={f.days} onClick={() => setQuickFilter(f.days)} className={quickFilter === f.days ? 'active' : ''}>{f.label}</button>
            ))}
          </div>
          <select
            value={selectedDate}
            onChange={e => setSelectedDate(e.target.value)}
            style={{ padding: '6px 10px', border: '1px solid var(--line-2)', borderRadius: 8, background: 'var(--bg-elev)', fontSize: 12, color: 'var(--fg-1)' }}
          >
            {AVAILABLE_DATES.map(d => (
              <option key={d} value={d}>{new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</option>
            ))}
          </select>
          <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)' }}>{lastRefresh.toLocaleTimeString('en-US', { hour12: false })}</span>
          <button className="btn" onClick={handleRefresh} disabled={loading}>
            <span style={{ display: 'inline-block', transform: loading ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.4s' }}>
              <Icon name="refresh" size={13} />
            </span>
            {window.__t('swot.refresh')}
          </button>
        </div>
      </div>

      {/* Summary bar */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
        {['strengths','weaknesses','opportunities','threats'].map(k => {
          const cfg = SWOT_CONFIG[k];
          return (
            <div key={k} style={{ background: cfg.bg, border: `1px solid ${cfg.border}`, borderRadius: 10, padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ color: cfg.color, display: 'flex' }}><Icon name={cfg.icon} size={14} strokeWidth={1.8} /></span>
                <span style={{ fontSize: 10, fontWeight: 600, color: cfg.color, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{cfg.label}</span>
              </div>
              <div style={{ marginTop: 6 }}>
                <span style={{ fontSize: 24, fontWeight: 500, fontFamily: 'var(--serif, var(--sans))', color: 'var(--fg)' }}>{counts[k]}</span>
                <span style={{ fontSize: 11, color: 'var(--fg-3)', marginLeft: 8 }}>{window.__t('swot.items')}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Quadrants */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginBottom: 22 }}>
        <SwotQuadrant type="strengths" items={MOCK_SWOT().strengths} />
        <SwotQuadrant type="weaknesses" items={MOCK_SWOT().weaknesses} />
        <SwotQuadrant type="opportunities" items={MOCK_SWOT().opportunities} />
        <SwotQuadrant type="threats" items={MOCK_SWOT().threats} />
      </div>

      {/* Executive Brief */}
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 20, marginBottom: 18 }}>
        <h3 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 600, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{window.__t('swot.brief')}</h3>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.7, color: 'var(--fg-1)' }}>{MOCK_SWOT().executiveBrief}</p>
      </div>

      {/* Wins / Concerns / Recommendations */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 22 }}>
        <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ color: '#10b981', display: 'flex' }}><Icon name="checkCircle" size={14} /></span>
            <span style={{ fontSize: 11, fontWeight: 600, color: '#10b981', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{window.__t('swot.wins')}</span>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {MOCK_SWOT().keyWins.map((w, i) => (
              <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--fg-1)' }}>
                <span style={{ color: '#10b981', marginTop: 2, flexShrink: 0 }}><Icon name="checkCircle" size={12} /></span>{w}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ color: '#ef4444', display: 'flex' }}><Icon name="alertCircle" size={14} /></span>
            <span style={{ fontSize: 11, fontWeight: 600, color: '#ef4444', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{window.__t('swot.concerns')}</span>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {MOCK_SWOT().keyConcerns.map((c, i) => (
              <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--fg-1)' }}>
                <span style={{ color: '#ef4444', marginTop: 2, flexShrink: 0 }}><Icon name="alertCircle" size={12} /></span>{c}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{ color: '#f59e0b', display: 'flex' }}><Icon name="lightbulb" size={14} /></span>
            <span style={{ fontSize: 11, fontWeight: 600, color: '#f59e0b', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{window.__t('swot.recs')}</span>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {MOCK_SWOT().recommendations.map((r, i) => (
              <li key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--fg-1)' }}>
                <span style={{ color: '#f59e0b', marginTop: 2, flexShrink: 0 }}><Icon name="lightbulb" size={12} /></span>{r}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Complaint Trends */}
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 22, marginBottom: 18 }}>
        <div style={{ marginBottom: 6, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: '#ef4444', display: 'flex' }}><Icon name="messageWarning" size={16} /></span>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>{window.__t('swot.complaints.title')}</h3>
        </div>
        <p className="mono" style={{ margin: '0 0 14px', fontSize: 10, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{window.__t('swot.complaints.sub')}</p>
        <ComplaintChart data={MOCK_COMPLAINT_TRENDS} />
      </div>

      {/* Non-Booking Reasons */}
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', marginBottom: 18 }}>
        <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ color: '#ef4444', display: 'flex' }}><Icon name="alertTriangle" size={15} /></span>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>{window.__t('swot.nonBooking.title')}</h3>
          <span className="mono" style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--fg-4)' }}>{MOCK_NON_BOOKING_REASONS().length} {window.__t('swot.nonBooking.count')}</span>
        </div>
        <div style={{ padding: 18 }}>
          {MOCK_NON_BOOKING_REASONS().map((item, i) => {
            const max = MOCK_NON_BOOKING_REASONS()[0].count;
            const pct = (item.count / max) * 100;
            const isOpen = activeReason === item.reason;
            return (
              <div key={i} style={{ borderBottom: i === MOCK_NON_BOOKING_REASONS().length - 1 ? 'none' : '1px solid var(--line)' }}>
                <div
                  onClick={() => setActiveReason(isOpen ? null : item.reason)}
                  style={{ padding: '10px 4px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
                >
                  <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', width: 18, textAlign: 'right' }}>{i + 1}.</span>
                  <div style={{ flex: 1, position: 'relative', padding: '5px 8px' }}>
                    <div style={{ position: 'absolute', inset: 0, background: 'rgba(239,68,68,0.08)', borderRadius: 6, width: `${pct}%` }} />
                    <span style={{ position: 'relative', fontSize: 13, color: 'var(--fg-1)' }}>{item.reason}</span>
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 600, color: '#b91c1c', background: 'rgba(239,68,68,0.12)', padding: '3px 10px', borderRadius: 999 }}>{item.count}</span>
                  <span style={{ color: 'var(--fg-4)' }}><Icon name={isOpen ? 'chevronUp' : 'chevronDown'} size={14} /></span>
                </div>
                {isOpen && item.details && (
                  <div style={{ padding: '10px 18px 14px 30px', background: 'var(--bg-soft)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {item.details.map((d, j) => (
                      <div key={j} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12 }}>
                        <span style={{ color: '#f59e0b', marginTop: 2 }}><Icon name="phone" size={11} /></span>
                        <div>
                          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-1)', fontWeight: 500 }}>{d.phone}</div>
                          <div style={{ color: 'var(--fg-3)', marginTop: 2 }}>{d.summary}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Active Alerts */}
      <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
        <div
          onClick={() => setShowAlerts(!showAlerts)}
          style={{ padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
        >
          <span style={{ color: '#ef4444', display: 'flex' }}><Icon name="shieldAlert" size={16} /></span>
          <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>{window.__t('swot.alerts.title')}</h3>
          {alertCounts.pending > 0 && (
            <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 999, background: 'rgba(239,68,68,0.12)', color: '#b91c1c' }}>
              {alertCounts.pending} {window.__t('swot.alerts.open')}
            </span>
          )}
          <span style={{ marginLeft: 'auto', color: 'var(--fg-4)' }}><Icon name={showAlerts ? 'chevronUp' : 'chevronDown'} size={14} /></span>
        </div>

        {showAlerts && (
          <>
            <div style={{ display: 'flex', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
              {['pending','acknowledged','resolved'].map(key => {
                const active = alertTab === key;
                return (
                  <button
                    key={key}
                    onClick={() => setAlertTab(key)}
                    style={{
                      flex: 1, padding: '11px 14px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                      fontSize: 12, fontWeight: 500, textTransform: 'capitalize',
                      color: active ? 'var(--fg)' : 'var(--fg-3)',
                      borderBottom: active ? '2px solid var(--fg)' : '2px solid transparent',
                      background: active ? 'var(--bg-soft)' : 'transparent',
                      cursor: 'pointer'
                    }}
                  >
                    <Icon name={key === 'pending' ? 'alertTriangle' : key === 'acknowledged' ? 'eye' : 'checkCircle'} size={13} />
                    {key === 'pending' ? window.__t('swot.alerts.tab.open') : key === 'acknowledged' ? window.__t('swot.alerts.tab.ack') : window.__t('swot.alerts.tab.res')}
                    <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 999, background: active ? 'var(--fg)' : 'var(--line-2)', color: active ? 'var(--bg-elev)' : 'var(--fg-3)' }}>
                      {alertCounts[key]}
                    </span>
                  </button>
                );
              })}
            </div>
            <div style={{ padding: 16 }}>
              {filteredAlerts.length === 0 ? (
                <div style={{ padding: 40, textAlign: 'center', color: 'var(--fg-4)' }}>
                  <div style={{ marginBottom: 10 }}><Icon name="inbox" size={32} /></div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>No {alertTab === 'pending' ? 'open' : alertTab} alerts</div>
                  <div style={{ fontSize: 11, marginTop: 4 }}>{alertTab === 'pending' ? 'All clear.' : `No alerts in "${alertTab}" status.`}</div>
                </div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 520, overflowY: 'auto' }}>
                  {filteredAlerts.map(alert => {
                    const t = ALERT_TYPE[alert.alert_type] || { label: alert.alert_type, icon: 'alertTriangle', color: 'var(--fg-3)' };
                    const sev = SEVERITY_STYLE[alert.severity] || SEVERITY_STYLE.medium;
                    return (
                      <div key={alert.id} style={{ border: `1px solid ${sev.border}`, borderRadius: 10, padding: 14, background: sev.bg }}>
                        <div style={{ display: 'flex', gap: 12 }}>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
                              <span style={{ fontSize: 9, fontWeight: 700, padding: '2px 8px', borderRadius: 999, background: sev.text, color: 'white', letterSpacing: '0.06em' }}>{severityLabel(alert.severity)}</span>
                              <span style={{ fontSize: 10, fontWeight: 500, padding: '2px 8px', borderRadius: 999, background: 'var(--bg-elev)', color: t.color, border: '1px solid var(--line)', display: 'inline-flex', gap: 4, alignItems: 'center' }}>
                                <Icon name={t.icon} size={10} />{t.label}
                              </span>
                            </div>
                            <p style={{ margin: '0 0 8px', fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.5 }}>{alert.reason}</p>
                            <div style={{ display: 'flex', gap: 12, fontSize: 11, color: 'var(--fg-4)' }}>
                              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}><Icon name="clock" size={11} />{fmtDateTime(alert.created_at)}</span>
                              <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }} className="mono"><Icon name="phone" size={11} />{alert.phone}</span>
                            </div>
                          </div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
                            {alert.status === 'pending' && (
                              <>
                                <button onClick={() => handleAcknowledge(alert.id)} className="btn" style={{ fontSize: 11, padding: '5px 10px' }}>
                                  <Icon name="eye" size={11} /> {window.__t('swot.alerts.acknowledge')}
                                </button>
                                <button onClick={() => handleResolve(alert.id)} className="btn" style={{ fontSize: 11, padding: '5px 10px', color: '#10b981' }}>
                                  <Icon name="checkCircle" size={11} /> {window.__t('swot.alerts.resolve')}
                                </button>
                              </>
                            )}
                            {alert.status === 'acknowledged' && (
                              <button onClick={() => handleResolve(alert.id)} className="btn" style={{ fontSize: 11, padding: '5px 10px', color: '#10b981' }}>
                                <Icon name="checkCircle" size={11} /> Resolve
                              </button>
                            )}
                            {alert.status === 'resolved' && (
                              <span style={{ fontSize: 10, fontWeight: 600, padding: '4px 10px', borderRadius: 6, background: 'rgba(16,185,129,0.1)', color: '#047857', textAlign: 'center' }}>
                                {window.__t('swot.alerts.resolved')}
                              </span>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

window.Swot = Swot;