use crate::components::AppContext;
use crate::components::{BiddingBox, BiddingTable, Hand, TrickInPlay, HandDiagram};
use crate::{services, use_app_context};
use futures::FutureExt;
use log::info;
use protocol::actions::Bid;
use protocol::bridge_engine::{
    BiddingStatePlayerView, GameStatePlayerView, PlayResult,
    PlayStatePlayerView, TableStatePlayerView,
};
use protocol::card::Card;
use protocol::core::Player;
use yew::prelude::*;

#[derive(PartialEq, Properties, Clone)]
pub struct OnlineTableProps {
    pub table: protocol::Table,
}

#[function_component(OnlineTable)]
pub fn online_table(props: &OnlineTableProps) -> Html {
    let ctx = use_app_context();
    html! {
        <OnlineTableInner table={props.table.clone()} app_ctx={ctx}/>
    }
}

#[derive(PartialEq, Properties, Clone)]
pub struct OnlineTableInnerProps {
    pub table: protocol::Table,
    pub app_ctx: AppContext,
}

struct OnlineTableInner {
    table_state: Option<TableStatePlayerView>,
}

pub enum Msg {
    TableStateUpdated(Result<TableStatePlayerView, anyhow::Error>),
    RequestNewDeal,
    Bid(Bid),
    Play(Card),
}

impl OnlineTableInner {
    fn play(&mut self, ctx: &yew::Context<Self>, card: Card) {
        let _play_state = match &self.table_state {
            Some(TableStatePlayerView::Game(GameStatePlayerView::Playing(
                play_state,
            ))) => play_state,
            _ => {
                info!(
                    "Cannot play card with table state: {:#?}",
                    self.table_state
                );
                return;
            }
        };
        info!("Playing card {card:?}");
        let table = ctx.props().table.clone();
        ctx.link().send_future(
            async move {
                services::play(table.clone(), card).await?;
                services::get_table_player_view(table).await
            }
            .map(Msg::TableStateUpdated),
        );
    }

    fn view_result(
        &self,
        ctx: &yew::Context<Self>,
        result: &PlayResult,
    ) -> Html {
        let leave_table = {
            let ctx = ctx.props().app_ctx.clone();
            Callback::from(move |_| ctx.leave_table())
        };

        let center = html! {
            <>
                <div class="sidebar">
                  <div>
                    <h2>{"Contract"}</h2>
                    <p>{"todo"}</p>
                  </div>
                  <div>
                    <h2>{"Bidding"}</h2>
                    <BiddingTable bidding={result.bidding().clone()} />
                  </div>
                  <div>
                    <h2>{"Trick Count"}</h2>
                    <p>{"todo"}</p>
                  </div>
                </div>
                <div class="center">
               </div>
                <div class="hand north">
                  <HandDiagram cards={result.deal().north.clone()} on_card_clicked={Callback::from(|_| ())} />
                </div>
                <div class="hand east">
                  <HandDiagram cards={result.deal().east.clone()} on_card_clicked={Callback::from(|_| ())} />
                </div>
                <div class="hand south">
                  <HandDiagram cards={result.deal().south.clone()} on_card_clicked={Callback::from(|_| ())} />
                </div>
                <div class="hand west">
                  <HandDiagram cards={result.deal().west.clone()} on_card_clicked={Callback::from(|_| ())} />
                </div>
            </>
        };
        html! {
            <>
                <div class="game-layout">
                <div class="navbar">
                  <ul>
                  <li>{format!("This is table {}", ctx.props().table.id)}</li>
                  <li>
                    <button onclick={leave_table}>
                        { "Leave table" }
                    </button>
                  </li>
                  </ul>
                </div>
                {center}
                </div>
            </>
        }
    }

    fn view_game(
        &self,
        ctx: &yew::Context<Self>,
        game: &GameStatePlayerView,
    ) -> Html {
        let center = match game {
            GameStatePlayerView::Bidding(bidding) => {
                bidding_view(bidding, ctx.link().callback(Msg::Bid))
            }
            GameStatePlayerView::Playing(playing) => {
                playing_view(playing, ctx.link().callback(Msg::Play))
            }
        };

        let leave_table = {
            let ctx = ctx.props().app_ctx.clone();
            Callback::from(move |_| ctx.leave_table())
        };

        html! {
            <>
                <div class="game-layout">
                <div class="navbar">
                  <ul>
                  <li>{format!("This is table {}", ctx.props().table.id)}</li>
                  <li>
                    <button onclick={leave_table}>
                        { "Leave table" }
                    </button>
                  </li>
                  </ul>
                </div>
                {center}
                </div>
            </>
        }
    }
}

impl Component for OnlineTableInner {
    type Message = Msg;

    type Properties = OnlineTableInnerProps;

    fn create(ctx: &yew::Context<Self>) -> Self {
        ctx.link().send_future(
            services::get_table_player_view(ctx.props().table.clone())
                .map(Msg::TableStateUpdated),
        );
        Self { table_state: None }
    }

    fn update(&mut self, ctx: &yew::Context<Self>, msg: Msg) -> bool {
        match msg {
            Msg::Bid(bid) => {
                info!("Bid clicked: {bid:?}");
                let table = ctx.props().table.clone();
                ctx.link().send_future(
                    async move {
                        services::bid(table.clone(), bid).await?;
                        services::get_table_player_view(table).await
                    }
                    .map(Msg::TableStateUpdated),
                );
                false
            }
            Msg::Play(card) => {
                self.play(ctx, card);
                false
            }
            Msg::TableStateUpdated(Ok(table_state)) => {
                self.table_state = Some(table_state);
                true
            }
            Msg::TableStateUpdated(Err(error)) => {
                ctx.props().app_ctx.set_error(error);
                false
            }
            Msg::RequestNewDeal => {
                let table = ctx.props().table.clone();
                ctx.link().send_future(
                    async move {
                        services::new_deal(table.clone()).await?;
                        services::get_table_player_view(table).await
                    }
                    .map(Msg::TableStateUpdated),
                );
                false
            }
        }
    }

    fn view(&self, ctx: &yew::Context<Self>) -> Html {
        match &self.table_state {
            None => loading(),
            Some(TableStatePlayerView::Unknown) => html! {
                <p>{"An error occurred."}</p>
            },
            Some(TableStatePlayerView::Game(game)) => self.view_game(ctx, game),
            Some(TableStatePlayerView::Result(result)) => {
                self.view_result(ctx, result)
            }
        }
    }
}

fn loading() -> Html {
    html! { <p>{"Loading table information"}</p> }
}

pub fn bidding_view(
    bidding: &BiddingStatePlayerView,
    on_bid: Callback<Bid>,
) -> Html {
    html! {
        <>
            <div class="sidebar">
              <h2>{ "Table view" }</h2>
              <pre>{ format!("{:#?}", bidding) }</pre>
            </div>
            <div class="center">
                <BiddingTable bidding={bidding.bidding.clone()} />
                <BiddingBox current_bid={bidding.bidding.highest_bid()} on_bid={ on_bid } />
                { format!("It is {:?} to bid", bidding.bidding.current_bidder()) }
            </div>
            <div class="hand south">
            <Hand cards={ bidding.hand.clone() } on_card_clicked={ Callback::from(|_| {}) } />
            </div>
        </>
    }
}

pub fn playing_view(
    playing: &PlayStatePlayerView,
    on_card_clicked: Callback<Card>,
) -> Html {
    // Only one layout is currently supported.
    assert_eq!(playing.player_position, Player::South);
    assert_eq!(playing.contract.declarer, Player::South);

    let dummy = match &playing.dummy {
        Some(hand) => html! {
            <Hand cards={hand.clone()} on_card_clicked={on_card_clicked.clone()}/>
        },
        None => html! {<p>{"Dummy is not visible yet"}</p>},
    };

    html! {
        <>
            <div class="sidebar">
              <div>
                <h2>{"Contract"}</h2>
                <p>{format!("{}", playing.contract)}</p>
              </div>
              <div>
                <h2>{"Bidding"}</h2>
                <BiddingTable bidding={playing.bidding.clone()} />
              </div>
              <div>
                <h2>{"Trick Count"}</h2>
                <p>{format!("Declarer: {}", playing.declarer_tricks)}</p>
              </div>
              if let Some(previous_trick) = &playing.previous_trick {
              <div>
                <h2>{"Previous Trick"}</h2>
                    <TrickInPlay trick={previous_trick.clone()}/>
              </div>
              }
            </div>
            <div class="center">
              <TrickInPlay  trick={playing.current_trick.trick.clone()}/>
              <p>{ format!("It is {:?} to play", playing.current_player()) }</p>
           </div>
            <div class="hand north">
              { dummy }
            </div>
            <div class="hand south">
              <Hand cards={playing.hand.clone()} on_card_clicked={on_card_clicked.clone()} />
            </div>
        </>
    }
}