import 'package:flutter/material.dart';
import '../core/theme/app_colors.dart';
import '../core/theme/app_text_styles.dart';
import '../core/theme/app_spacing.dart';
import '../core/theme/app_gradients.dart';
import '../core/widgets/fs_button.dart';
import '../core/widgets/fs_text_field.dart';
import '../core/widgets/fs_badge.dart';
import '../core/widgets/stat_card.dart';
import '../core/widgets/chat_bubble.dart';
import '../core/widgets/confidence_meter.dart';
import '../core/widgets/sentiment_badge.dart';
import '../core/widgets/rate_limit_timer.dart';
import '../core/widgets/jargon_panel.dart';
import '../core/widgets/option_button.dart';
import '../core/widgets/scenario_card.dart';
import '../core/widgets/fs_empty_state.dart';
import '../core/widgets/fs_shimmer.dart';

/// Temporary showcase screen to verify the entire Phase 1 design system.
/// This screen will be removed in Phase 2 when real screens are added.
class Phase1ShowcaseScreen extends StatelessWidget {
  const Phase1ShowcaseScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: AppSpacing.screenAll,
          children: [
            // ── Header ──
            ShaderMask(
              shaderCallback: (b) => AppGradients.textAccent.createShader(b),
              child: Text('📊 FinSim Flutter', style: AppTextStyles.headlineLarge.copyWith(color: Colors.white)),
            ),
            Text('Phase 1 — Design System Showcase', style: AppTextStyles.bodySmall),
            AppSpacing.vXl,

            // ── Buttons ──
            _SectionTitle('Buttons'),
            FSButton(label: 'Primary Button', onPressed: () {}),
            AppSpacing.vSm,
            FSButton(label: 'Secondary Button', onPressed: () {}, variant: FSButtonVariant.secondary),
            AppSpacing.vSm,
            FSButton(label: 'Gradient Button', onPressed: () {}, variant: FSButtonVariant.gradient),
            AppSpacing.vSm,
            FSButton(label: '🔮 Akinator Predict', onPressed: () {}, variant: FSButtonVariant.akinator),
            AppSpacing.vSm,
            FSButton(label: 'Danger Button', onPressed: () {}, variant: FSButtonVariant.danger),
            AppSpacing.vSm,
            const FSButton(label: 'Loading...', isLoading: true),
            AppSpacing.vSm,
            const FSButton(label: 'Disabled', onPressed: null),
            AppSpacing.vXl,

            // ── Text Fields ──
            _SectionTitle('Text Fields'),
            FSTextField(label: 'Email', hint: 'your@email.com', keyboardType: TextInputType.emailAddress),
            AppSpacing.vMd,
            FSTextField(label: 'Password', hint: '••••••••', obscureText: true),
            AppSpacing.vMd,
            FSTextField(label: 'Stock Symbol', hint: 'AAPL, TSLA, or leave empty'),
            AppSpacing.vXl,

            // ── Badges ──
            _SectionTitle('Badges'),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                const FSBadge(text: 'success', variant: FSBadgeVariant.green),
                const FSBadge(text: 'error', variant: FSBadgeVariant.red),
                const FSBadge(text: 'warning', variant: FSBadgeVariant.orange),
                const FSBadge(text: 'info', variant: FSBadgeVariant.blue),
                const FSBadge(text: 'akinator', variant: FSBadgeVariant.purple),
                FSBadge.risk('High'),
                FSBadge.risk('Medium'),
                FSBadge.risk('Low'),
                FSBadge.difficulty('hard'),
                FSBadge.difficulty('easy'),
              ],
            ),
            AppSpacing.vXl,

            // ── Stat Cards ──
            _SectionTitle('Stat Cards'),
            GridView.count(
              crossAxisCount: 2,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              crossAxisSpacing: 12,
              mainAxisSpacing: 12,
              childAspectRatio: 1.3,
              children: const [
                StatCard(icon: '🎯', value: '450', label: 'Total Score'),
                StatCard(icon: '📝', value: '12', label: 'Quizzes'),
                StatCard(icon: '✅', value: '72%', label: 'Accuracy'),
                StatCard(icon: '📊', value: '75', label: 'Avg Score'),
              ],
            ),
            AppSpacing.vXl,

            // ── Chat Bubbles ──
            _SectionTitle('Chat Bubbles'),
            const ChatBubble(text: 'Should I invest in AAPL right now?', isUser: true),
            AppSpacing.vSm,
            const ChatBubble(text: '**Apple (AAPL)** is currently trading at \$198.50.\n\n'
                '📈 **Key Metrics:**\n- P/E Ratio: 29.4\n- Market Cap: \$3.05T\n- 52-Week Range: \$164 - \$200\n\n'
                'The stock is near its *52-week high* which suggests strong momentum.'),
            AppSpacing.vSm,
            const ChatBubble(text: '', isTyping: true),
            AppSpacing.vSm,
            const ChatBubble(
              text: 'Based on uploaded financial documents...',
              ragUsed: true,
            ),
            AppSpacing.vXl,

            // ── Confidence & Sentiment ──
            _SectionTitle('Akinator Metadata'),
            Row(
              children: [
                const ConfidenceMeter(score: 82),
                AppSpacing.hMd,
                const ConfidenceMeter(score: 55),
                AppSpacing.hMd,
                const ConfidenceMeter(score: 30),
              ],
            ),
            AppSpacing.vMd,
            const Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                SentimentBadge(label: 'Bullish', score: 72),
                SentimentBadge(label: 'Bearish', score: 28),
                SentimentBadge(label: 'Mixed', score: 50),
              ],
            ),
            AppSpacing.vMd,
            const JargonPanel(definitions: {
              'P/E Ratio': 'Price-to-Earnings — how much investors pay for each dollar of earnings.',
              'Volatility': 'How much a price swings. High volatility = risky.',
              'Sharpe Ratio': 'Return per unit of risk. Above 1 is good, above 2 is great.',
            }),
            AppSpacing.vXl,

            // ── Quiz Options ──
            _SectionTitle('Quiz Options'),
            OptionButton(label: 'A', text: 'Hold existing positions and avoid panic selling', state: OptionState.idle, onTap: () {}),
            AppSpacing.vSm,
            const OptionButton(label: 'B', text: 'Sell all positions immediately', state: OptionState.selected),
            AppSpacing.vSm,
            const OptionButton(label: 'C', text: 'Go all-in with leverage', state: OptionState.correct),
            AppSpacing.vSm,
            const OptionButton(label: 'D', text: 'Short the market aggressively', state: OptionState.wrong),
            AppSpacing.vXl,

            // ── Scenario Card ──
            _SectionTitle('Scenario Card'),
            ScenarioCard(
              title: 'COVID-19 Market Crash — AAPL Plunge',
              description: 'Apple stock drops significantly amid pandemic fears and global lockdowns.',
              riskLevel: 'High',
              difficulty: 'medium',
              eventType: 'major',
              onTap: () {},
            ),
            AppSpacing.vXl,

            // ── Rate Limit Timer ──
            _SectionTitle('Rate Limit Timer'),
            const RateLimitTimer(totalSeconds: 15),
            AppSpacing.vXl,

            // ── Shimmer Loading ──
            _SectionTitle('Shimmer Loading'),
            Row(
              children: [
                FSShimmer.circle(size: 40),
                AppSpacing.hSm,
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      FSShimmer.line(width: 180),
                      AppSpacing.vXs,
                      FSShimmer.line(width: 120, height: 10),
                    ],
                  ),
                ),
              ],
            ),
            AppSpacing.vSm,
            FSShimmer.card(),
            AppSpacing.vXl,

            // ── Empty State ──
            _SectionTitle('Empty State'),
            const FSEmptyState(
              icon: '📝',
              title: 'No quizzes yet',
              subtitle: 'Start practicing to see your results here!',
              actionLabel: 'Start Quiz',
            ),
            AppSpacing.vXl,

            // ── Done ──
            Center(
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                decoration: BoxDecoration(
                  color: AppColors.successBg,
                  border: Border.all(color: AppColors.success.withOpacity(0.3)),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  '✅ Phase 1 Complete — All widgets verified!',
                  style: AppTextStyles.labelLarge.copyWith(color: AppColors.successLight),
                ),
              ),
            ),
            AppSpacing.vXxl,
          ],
        ),
      ),
    );
  }
}

class _SectionTitle extends StatelessWidget {
  final String title;
  const _SectionTitle(this.title);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: AppTextStyles.titleMedium),
          const SizedBox(height: 4),
          Container(
            width: 40,
            height: 3,
            decoration: BoxDecoration(
              gradient: AppGradients.textAccent,
              borderRadius: BorderRadius.circular(2),
            ),
          ),
        ],
      ),
    );
  }
}