// Screen 03 — Welcome.

use ltk::
{
	Corners, Element,
	column, container, flex, row, scroll, spacer, text,
};

use crate::app::Msg;
use crate::assets;
use crate::flow::Screen;
use crate::i18n::tr;
use crate::state::State;
use crate::ui::chrome;
use crate::ui::theme as t;

const CARD_PADDING:  f32 = 20.0;
const LANDSCAPE_PCT: f32 = 0.40;

pub fn view( state: &State ) -> Element<Msg>
{
	let palette = ltk::theme_palette();

	let ( w, h ) = state.viewport;
	let logo_px = ( w.min( h ) as f32 * 0.25 ) as u32;

	let logo: Element<Msg> = assets::brand_isotype::<Msg>( logo_px )
		.unwrap_or_else( || spacer().into() );

	let bullets_inner = column::<Msg>()
		.spacing( 12.0 )
		.push( bullet( &tr!( "welcome.bullet_1" ) ) )
		.push( bullet( &tr!( "welcome.bullet_2" ) ) )
		.push( bullet( &tr!( "welcome.bullet_3" ) ) )
		.push( bullet( &tr!( "welcome.bullet_4" ) ) );

	let bullets_card = container::<Msg>( bullets_inner )
		.background( palette.surface )
		.radius( Corners::all( t::CARD_RADIUS ) )
		.padding( CARD_PADDING );

	let clock_icon: Element<Msg> = assets::theme_icon::<Msg>( "features/clock", 18 )
		.unwrap_or_else( || spacer().into() );

	// Wrap the row in a column with the same shape as `bullets_inner`
	// so both cards share the exact same nesting (container → column
	// → row → icon). Anything else introduced subtle layout drift
	// that pushed the clock a few pixels off the bullets' X.
	let duration_inner = column::<Msg>()
		.spacing( 12.0 )
		.push(
			row::<Msg>()
				.spacing( 12.0 )
				.push( clock_icon )
				.push( flex(
					text( tr!( "welcome.duration" ).to_string() )
						.size( t::BODY_SIZE )
						.color( palette.text_primary )
						.wrap( true ),
				) ),
		);

	let duration_card = container::<Msg>( duration_inner )
		.background( palette.surface )
		.radius( Corners::all( t::CARD_RADIUS ) )
		.padding( CARD_PADDING );

	// The cards live in their own column so we can cap their width
	// in landscape without affecting the logo / title / CTA.
	let mut cards = column::<Msg>()
		.spacing( t::ITEM_SPACING )
		.push( bullets_card )
		.push( duration_card );
	if w > h
	{
		cards = cards.max_width( w as f32 * LANDSCAPE_PCT );
	}

	let content = column::<Msg>()
		.spacing( t::SECTION_SPACING )
		.push( logo )
		.push( chrome::title_block(
			&tr!( "welcome.title" ),
			Some( &tr!( "welcome.subtitle" ) ),
		) )
		.push( cards );

	let body = column::<Msg>()
		.padding( t::PAGE_PADDING_H )
		.spacing( t::SECTION_SPACING )
		.push( chrome::top_bar( Screen::Welcome, true, state.mode ) )
		.push( scroll( content ) )
		.push( chrome::primary_cta( &tr!( "welcome.cta" ), Some( Msg::Next ) ) );

	chrome::page( body )
}

fn bullet( label: &str ) -> Element<Msg>
{
	let palette = ltk::theme_palette();

	let icon: Element<Msg> = assets::theme_icon::<Msg>( "feedback/ok", 18 )
		.unwrap_or_else( || spacer().into() );

	row::<Msg>()
		.spacing( 12.0 )
		.push( icon )
		.push( flex(
			text( label.to_string() )
				.size( t::BODY_SIZE )
				.color( palette.text_primary )
				.weight( 700 )
				.wrap( true ),
		) )
		.into()
}
