src/components/chat/StateCards.tsx

'use client';

import React from 'react';

interface StateCardProps {
  question?: string;
  onSubmit?: (question: string) => void;
}

export function UnsupportedRequest({ question, onSubmit }: StateCardProps) {
  const sampleQuestions = [
    'What was the Liquidity Coverage Ratio (LCR) in Q1 2026?',
    'What are the key drivers for net profit growth?',
    'Show the Net Interest Margin (NIM) performance.',
    'How did business segment performance vary across RBWM, CIB, GM&T and DenizBank?',
    'What are the sustainable finance and ESG rating highlights?',
    'What drove loan growth and deposit growth?',
    'What is the capital adequacy position in Q1 2026?',
  ];

  return (
    <div className="state-card state-card-out-of-scope fade-in-up" style={{ margin: '0.25rem 0' }}>
      {/* Main content area */}
      <div className="state-card-main">
        <div className="state-card-header">
          <div className="state-card-icon-wrapper">🚫</div>
          <span className="badge badge-out-of-scope" style={{ fontSize: '0.65rem' }}>Out of Scope</span>
        </div>
        
        <h3 className="state-card-title">Query Outside Scope</h3>
        
        <p className="state-card-desc">
          IRIS is designed exclusively for Investor Relations and Financial Document Intelligence. 
          The requested topic is outside our financial domain scope.
        </p>

        {question && (
          <div className="state-query-quote">
            &ldquo;{question}&rdquo;
          </div>
        )}

        <div style={{ marginTop: '0.5rem' }}>
          <h4 className="state-section-title">Supported Subject Areas</h4>
          <div className="state-card-features-grid">
            <div className="state-feature-item">
              <span className="state-feature-icon">📊</span>
              <div>
                <div className="state-feature-title">Financial KPIs</div>
                <div className="state-feature-desc">NIM, LCR, Cost of Risk, CET1, ROE, ROA, Net Profit</div>
              </div>
            </div>
            
            <div className="state-feature-item">
              <span className="state-feature-icon">📅</span>
              <div>
                <div className="state-feature-title">Reporting Periods</div>
                <div className="state-feature-desc">Earnings releases, investor presentations, annual results, YoY & QoQ comparisons</div>
              </div>
            </div>

            <div className="state-feature-item">
              <span className="state-feature-icon">📂</span>
              <div>
                <div className="state-feature-title">Official IR Documents</div>
                <div className="state-feature-desc">Investor presentations, financial statements, disclosures</div>
              </div>
            </div>

            <div className="state-feature-item">
              <span className="state-feature-icon">🏢</span>
              <div>
                <div className="state-feature-title">Business Segments</div>
                <div className="state-feature-desc">RBWM, CIB, GM&T, DenizBank</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Sidebar area */}
      <div className="state-card-sidebar">
        <div>
          <h4 className="state-section-title">Try These Questions</h4>
          <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.4 }}>
            Click any of these sample queries to explore valid Investor Relations data:
          </p>
          <div className="state-examples-list">
            {sampleQuestions.map((q) => (
              <button
                key={q}
                className="state-example-btn"
                type="button"
                onClick={() => onSubmit?.(q)}
              >
                {q}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export function InsufficientEvidence({ question, onSubmit }: StateCardProps) {
  const sampleQuestions = [
    'What was Emirates NBD\'s net interest margin in Q1 2026?',
    'What is the cost to income ratio details?',
    'What was the retail segment\'s performance?',
    'What was the total profit in Q1 2026?',
    'What was the total income in Q1 2026?',
    'How did total income compare with the prior period?',
    'What were the main drivers of profitability?',
  ];

  return (
    <div className="state-card state-card-info fade-in-up" style={{ margin: '0.25rem 0' }}>
      {/* Main content area */}
      <div className="state-card-main">
        <div className="state-card-header">
          <div className="state-card-icon-wrapper">🔍</div>
          <span className="badge badge-info" style={{ fontSize: '0.65rem' }}>Refinement Needed</span>
        </div>
        
        <h3 className="state-card-title">Insufficient Evidence</h3>
        
        <p className="state-card-desc">
          We scanned the active investor presentations and reports, but could not retrieve enough verified source evidence to generate a reliable answer.
        </p>

        {question && (
          <div className="state-query-quote">
            &ldquo;{question}&rdquo;
          </div>
        )}

        <div style={{ marginTop: '0.5rem' }}>
          <h4 className="state-section-title">How to refine your query</h4>
          <div className="state-card-features-grid">
            <div className="state-feature-item">
              <span className="state-feature-icon">🎯</span>
              <div>
                <div className="state-feature-title">Be Specific</div>
                <div className="state-feature-desc">Include specific metrics like &ldquo;LCR&rdquo;, &ldquo;Net Profit&rdquo;, or &ldquo;Loan Growth&rdquo;.</div>
              </div>
            </div>
            
            <div className="state-feature-item">
              <span className="state-feature-icon">🗓️</span>
              <div>
                <div className="state-feature-title">Specify Timeframe</div>
                <div className="state-feature-desc">Target a reporting period (e.g. &ldquo;Q1 2026&rdquo;, &ldquo;FY 2025&rdquo;).</div>
              </div>
            </div>

            <div className="state-feature-item">
              <span className="state-feature-icon">📁</span>
              <div>
                <div className="state-feature-title">Check Filters</div>
                <div className="state-feature-desc">Ensure the relevant documents are ticked in the left panel.</div>
              </div>
            </div>

            <div className="state-feature-item">
              <span className="state-feature-icon">🔤</span>
              <div>
                <div className="state-feature-title">Standard Terms</div>
                <div className="state-feature-desc">Use standard financial terms instead of conversational phrases.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Sidebar area */}
      <div className="state-card-sidebar">
        <div>
          <h4 className="state-section-title">Suggested Questions</h4>
          <p style={{ fontSize: '0.72rem', color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.4 }}>
            Try adjusting your question or check these common financial inquiries:
          </p>
          <div className="state-examples-list">
            {sampleQuestions.map((q) => (
              <button
                key={q}
                className="state-example-btn"
                type="button"
                onClick={() => onSubmit?.(q)}
              >
                {q}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}