// src/components/intro/intro.rs
use ratatui::{
    layout::{Alignment, Constraint, Direction, Layout, Rect},
    style::Style,
    text::{Line, Span},
    widgets::{Block, BorderType, Borders, Paragraph},
    prelude::Margin,
    Frame,
};
use crate::config::colors::themes::Theme;
use crate::state::pages::intro::IntroState;

pub fn render_intro(f: &mut Frame, intro_state: &IntroState, area: Rect, theme: &Theme) {
    let block = Block::default()
        .borders(Borders::ALL)
        .border_type(BorderType::Rounded)
        .border_style(Style::default().fg(theme.accent))
        .style(Style::default().bg(theme.bg));

    let inner_area = block.inner(area);
    f.render_widget(block, area);

    // Center layout
    let chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Percentage(40),
            Constraint::Length(5),
            Constraint::Percentage(40),
        ])
        .split(inner_area);

    // Title
    let title = Line::from(vec![
        Span::styled("KompAC", Style::default().fg(theme.highlight)),
        Span::styled(" v", Style::default().fg(theme.fg)),
        Span::styled(env!("CARGO_PKG_VERSION"), Style::default().fg(theme.secondary)),
    ]);
    let title_para = Paragraph::new(title)
        .alignment(Alignment::Center);
    f.render_widget(title_para, chunks[1]);

    // Buttons - now with 4 options
    let button_area = Layout::default()
        .direction(Direction::Horizontal)
        .constraints([
            Constraint::Percentage(25),
            Constraint::Percentage(25),
            Constraint::Percentage(25),
            Constraint::Percentage(25),
        ])
        .split(chunks[1].inner(Margin {
            horizontal: 1,
            vertical: 1
        }));

    let buttons = ["Continue", "Admin", "Login", "Register"];
    for (i, &text) in buttons.iter().enumerate() {
        render_button(f, button_area[i], text, intro_state.selected_option == i, theme);
    }
}

fn render_button(f: &mut Frame, area: Rect, text: &str, selected: bool, theme: &Theme) {
    let button_style = Style::default()
        .fg(if selected { theme.highlight } else { theme.fg })
        .bg(theme.bg)
        .add_modifier(if selected {
            ratatui::style::Modifier::BOLD
        } else {
            ratatui::style::Modifier::empty()
        });

    let border_style = Style::default()
        .fg(if selected { theme.accent } else { theme.border });

    let button = Paragraph::new(text)
        .style(button_style)
        .alignment(Alignment::Center)
        .block(
            Block::default()
            .borders(Borders::ALL)
            .border_type(BorderType::Double)
            .border_style(border_style),
        );

    f.render_widget(button, area);
}