'use client';

import React from 'react';

interface LeftDocumentPanelProps {
  onSelectQuestion?: (q: string) => void;
  onCollapse?: () => void;
  recentQuestions?: string[];
}

interface FAQItem {
  question: string;
  tag: string;
}

export function LeftDocumentPanel({
  onSelectQuestion,
  onCollapse,
  recentQuestions = [],
}: LeftDocumentPanelProps) {
  const defaultFaqGroups: { title: string; items: FAQItem[] }[] = [
    {
      title: "Today",
      items: [
        { question: "What was the Net Interest Margin in Q1 2026?", tag: "Margin & NIM" },
        { question: "How did Net Profit perform year-on-year?", tag: "Profitability" },
        { question: "How did business segment performance vary across RBWM, CIB, GM&T and DenizBank?", tag: "Segments" },
        { question: "What ESG progress did Emirates NBD report in the presentation?", tag: "ESG" },
        { question: "How did loans and deposits perform in Q1 2026?", tag: "Loans & Deposits" },
        { question: "What is the loans by sector distribution?", tag: "Sector Mix" },
        { question: "What were the key Q1 2026 performance highlights?", tag: "Highlights" },
      ],
    },
    {
      title: "Last 7 days",
      items: [
        { question: "What is the Capital Adequacy Ratio?", tag: "Capital Strength" },
        { question: "What drove the improvement in Cost of Risk?", tag: "Credit Quality" },
        { question: "Which business segment contributed most to operating income and PBT?", tag: "Segment PBT" },
        { question: "What are the sustainable finance and ESG rating highlights?", tag: "ESG Ratings" },
        { question: "What drove loan growth and deposit growth?", tag: "Growth Drivers" },
        { question: "How diversified is the gross loan book by sector?", tag: "Loan Sectors" },
        { question: "How did total income and operating income perform?", tag: "Income" },
      ],
    },
    {
      title: "Last 30 days",
      items: [
        { question: "How did the retail banking segment perform?", tag: "Retail Segment" },
        { question: "What is the liquidity coverage ratio?", tag: "Liquidity" },
        { question: "Compare divisional performance across operating income, costs and PBT.", tag: "Divisions" },
        { question: "What are the ESG forward journey and net-zero milestones?", tag: "ESG Roadmap" },
        { question: "What is the CASA ratio and deposit mix?", tag: "Deposit Mix" },
        { question: "What sector concentration risks are visible in the loan portfolio?", tag: "Sector Risk" },
        { question: "What are the funding and liquidity strengths of the group?", tag: "Funding" },
      ],
    },
  ];

  const existingQuestions = new Set(
    defaultFaqGroups.flatMap(group => group.items.map(item => item.question.toLowerCase()))
  );

  const recentItems = recentQuestions
    .filter(question => !existingQuestions.has(question.toLowerCase()))
    .map(question => ({ question, tag: "Recent" }));

  const faqGroups = recentItems.length > 0
    ? [{ title: "Recent Questions", items: recentItems }, ...defaultFaqGroups]
    : defaultFaqGroups;

  return (
    <aside className="app-left" style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {/* Header with collapse button */}
      <div style={{
        padding: '1rem',
        borderBottom: '1px solid var(--border-subtle)',
        background: 'var(--bg-high)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
        <div>
          <span style={{ fontSize: '0.75rem', fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--enbd-blue)' }}>
            IR Intelligence FAQ
          </span>
          <div style={{ fontSize: '0.62rem', color: 'var(--text-disabled)', marginTop: '2px' }}>
            Frequently Asked Queries
          </div>
        </div>
        <button
          onClick={onCollapse}
          title="Collapse Panel"
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            color: 'var(--enbd-blue)',
            padding: '0.3rem',
            borderRadius: 'var(--radius-sm)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            transition: 'all 0.15s ease',
          }}
          className="collapse-btn"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="11 17 6 12 11 7"/>
            <polyline points="18 17 13 12 18 7"/>
          </svg>
        </button>
      </div>

      {/* FAQ Cards Body */}
      <div style={{ flex: 1, padding: '1.25rem 1rem', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
        {faqGroups.map((group, groupIdx) => (
          <div key={groupIdx} style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
            {/* Group Timeframe Header */}
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.5rem',
              paddingBottom: '0.2rem',
              borderBottom: '1px solid var(--enbd-blue-border)',
            }}>
              <span style={{ fontSize: '0.68rem', fontWeight: 700, color: 'var(--enbd-blue)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                {group.title}
              </span>
              <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: 'var(--gold)' }} />
            </div>

            {/* Group Questions List */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
              {group.items.map((item, itemIdx) => (
                <button
                  key={itemIdx}
                  onClick={() => onSelectQuestion?.(item.question)}
                  style={{
                    background: 'var(--bg-card)',
                    border: '1px solid var(--border-mid)',
                    borderRadius: 'var(--radius-md)',
                    padding: '0.75rem 0.875rem',
                    textAlign: 'left',
                    cursor: 'pointer',
                    transition: 'all 0.15s ease-in-out',
                    width: '100%',
                    fontFamily: 'var(--font-body)',
                    boxShadow: 'var(--shadow-card)',
                    position: 'relative',
                    overflow: 'hidden',
                  }}
                  className="faq-card-item"
                >
                  {/* Subtle left gold stripe */}
                  <div style={{
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    bottom: 0,
                    width: '3px',
                    background: 'var(--gold)',
                  }} />

                  {/* Header containing tag */}
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.35rem' }}>
                    <span className="badge" style={{ fontSize: '0.58rem', background: 'var(--enbd-blue-muted)', color: 'var(--enbd-blue)', border: '1px solid var(--enbd-blue-border)', fontWeight: 600, padding: '0.1rem 0.4rem' }}>
                      {item.tag}
                    </span>
                  </div>

                  {/* Question text */}
                  <p style={{
                    fontSize: '0.75rem',
                    color: 'var(--text-primary)',
                    fontWeight: 500,
                    lineHeight: 1.45,
                  }}>
                    {item.question}
                  </p>
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Brand footer inside Left panel */}
      <div style={{
        padding: '0.875rem 1rem',
        borderTop: '1px solid var(--border-subtle)',
        background: 'var(--bg-high)',
        textAlign: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.35rem' }}>
          <span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', fontWeight: 600, letterSpacing: '0.04em' }}>
            EMIRATES NBD · INVESTOR RELATIONS
          </span>
        </div>
      </div>
    </aside>
  );
}