import {
 IonCard,

 IonCardContent,
 
 IonButton,
 IonGrid,
 IonRow,

 IonIcon,
 useIonRouter,
 IonSelect,
 IonSelectOption,
 IonModal,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonContent,
 IonButtons
} from "@ionic/react";
import {

 copyOutline,
 walletOutline,
 cashOutline,
 logoBitcoin,
 logoUsd,
 logoUsd as logoTether,
 logoUsd as logoUsdc,
 logoUsd as logoBnb,
 chevronDownOutline,
 addOutline,
 eyeOffOutline,
 eyeOutline,
   downloadOutline,
  arrowUpOutline,
  swapHorizontalOutline,
  receiptOutline,
} from "ionicons/icons";
import { useState, useEffect } from "react";
import { Context } from "../../../context/contex";
import {
 formatNumber,
 hasCurrencyAndNetwork,
 shortenAddress,
} from "../../../utils/index";
import Deposit from "./Deposit";
import Send from "./Send";
import Buy from "./Buy";
import Transactions from "./Transactions";


type Props = {
 context: NonNullable<React.ContextType<typeof Context>>;
};

interface UsdtRate {
  rate: number;
  market_rate: number;
  adjustment: number;
}

interface UsdtRates {
  buy: UsdtRate;
  sell: UsdtRate;
}


const tokens = [
 { name: "Bitcoin", symbol: "btc", chains: ["btc"] },
 { name: "Litecoin", symbol: "ltc", chains: ["ltc"] },
 { name: "Ethereum", symbol: "eth", chains: ["erc20", "bep20"] },
 { name: "Solana", symbol: "sol", chains: ["bep20"] },
 { name: "USDC", symbol: "usdc", chains: ["bep20", "trc20", "erc20"] },
 { name: "USDT", symbol: "usdt", chains: ["bep20", "trc20", "erc20"] },
];

const Home: React.FC<Props> = ({ context }) => {
const [rates, setRates] = useState<UsdtRates | null>(null);

 const [show, setShow] = useState(false);
  const [showDepositModal, setShowDepositModal] = useState(false);
  const [showSendModal, setShowSendModal] = useState(false);
  const [showTradeModal, setShowTradeModal] = useState(false);
  const [showTxModal, setShowTxModal] = useState(false);

 const router = useIonRouter();
const [expandedToken, setExpandedToken] = useState<string | null>(null);

const toggleToken = (symbol: string) => {
  setExpandedToken(prev => (prev === symbol ? null : symbol));
};

 const {
  userInfo,
storage,
  getUserInfo,
  userWallets,
  userWalletsGroup,
  copy,
  apiRequest,

 } = context;
 const [showBalance, setShowBalance] = useState<boolean | number>(
  userInfo?.show_bal === 1
);
 const createWallet = async (id: string, currency: string, chain: string) => {
   const data = await apiRequest(
  "POST",
  "", //url
  {
 action: "generate_wallet_address",
     id: id,
     currency: currency,
     chain: chain,
  },
  true,       // require auth
  true    // show success or error messages
) as any;
if(data?.success){
   await getUserInfo();
}

 };

 const handleSelect = (value: string) => {
  if (!userInfo) {
   router.push("/login", "forward", "replace");
   return;
  }
  const [symbol, chain] = value.split(":");
  createWallet(userInfo?.id.toString(), symbol, chain);
  setShow(false);
 };


const groupedWallets = tokens.map(token => ({
  ...token,
  wallets: userWallets.filter(
    w => w.currency.toLowerCase() === token.symbol
  )
}));

const toggleBalanceVisibility = async () => {
  if (!userInfo || !storage) return;

  const newValue = showBalance ? 0 : 1;

  // Optimistic UI update
  setShowBalance(!showBalance);

     const data = await apiRequest(
  "POST",
  "", //url
  {
    action: "toggle_balance_visibility",
      show_bal: String(newValue),
  },
  true,       // require auth
  false       // show success or error messages
  
) as any;
   if (!data?.success) {
      // rollback if failed
      setShowBalance(showBalance);
    }

};

 const getRates = async () => {
   const data = await apiRequest(
  "POST",
  "", //url
  {
action: "get_usdt_ngn_rates"
  },
  false,       // require auth
  false    // show success or error messages
) as any;
//console.log("RATES", rates)
if(data?.success){
  setRates(data.message)
}

 };

 useEffect(() => {
getRates();
 }, [])

 return (
  <>
   {/* Overview Boxes */}
  <IonGrid>
     <IonCard className="home-balance-card ion-text-center">
      <IonCardContent>
    
    <div className="paynaire-balance-row">
    
        <div className="paynaire-balance-left">
          <div className="balance-header">
      <h4 className="balance-title">Portfolio</h4>
    
      <IonButton
        fill="clear"
        size="small"
        className="balance-toggle-btn"
        onClick={toggleBalanceVisibility}
      >
        <IonIcon
          icon={showBalance ? eyeOutline : eyeOffOutline}
        />
      </IonButton>
    </div>
    
          <div className="balance-section">
            <h2 className="balance-amount ngn">
             {showBalance
          ? `$${(userWalletsGroup as any)?.totals.usd}`
          : "$••••••"}
            </h2>
         <h5 className="balance-amount usd">
    {showBalance
      ? `= ₦${formatNumber((userWalletsGroup as any)?.totals.ngn, 2)}`
      : "= ₦••••••"}
  </h5>
          </div>
        </div>
    
     
      </div>
      </IonCardContent>
    </IonCard>
  <IonRow>
 
  </IonRow>
</IonGrid>

<div className="wallet-actions">
  <div className="wallet-action"     onClick={() => setShowDepositModal(true)}
>
    <IonIcon icon={downloadOutline} />
    <span>Deposit</span>
  </div>

  <div className="wallet-action" onClick={() => setShowSendModal(true)}>
    <IonIcon icon={arrowUpOutline} />
    <span>Withdraw</span>
  </div>

  <div className="wallet-action" onClick={() => setShowTradeModal(true)}>
    <IonIcon icon={swapHorizontalOutline} />
    <span>Trade</span>
  </div>

  <div className="wallet-action" onClick={() => setShowTxModal(true)}>
    <IonIcon icon={receiptOutline} />
    <span>Transactions</span>
  </div>
</div>

{rates && (
  <div className="rate-card">

    <div className="rate-header">
      <div>
        <h3>Today's Rates</h3>
      </div>
      <span className="rate-badge">LIVE</span>
    </div>

    <div className="rate-grid">
      {/* BUY */}
      <div className="rate-box buy">
        <div className="rate-label">BUY</div>
        <div className="rate-value">
          ₦{formatNumber(rates.buy.rate)}/$
        </div>
      
      </div>

      {/* SELL */}
      <div className="rate-box sell">
        <div className="rate-label">SELL</div>
        <div className="rate-value">
          ₦{formatNumber(rates.sell.rate)}/$
        </div>
     
      </div>
    </div>

<div className="rate-footer token-icons">
  {groupedWallets.map((token) => (
    <img
      key={token.symbol}
      src={`/assets/coins/${token.symbol}.png`}
      className="token-icon"
      alt={token.name}
      onError={(e) => {
        (e.currentTarget as HTMLImageElement).src =
          "/assets/coins/default.png";
      }}
    />
  ))}
</div>


  </div>
)}

   {/* Wallets Section */}
 
{userInfo?.quidax_id && (
  <div className="wallet-page">

  {/* HEADER */}
<div className="wallet-header-row">
  <div className="wallet-header-text">
    <h2>Your Wallets</h2>
    <p>Deposit addresses for supported assets</p>
  </div>

  <button
    className="wallet-add-btn"
    onClick={() => setShow(true)}
    aria-label="Create wallet"
  >
    <IonIcon icon={addOutline} />
  </button>
</div>


    {/* WALLET LIST */}
    <div className="wallet-list">

      {groupedWallets.map((token) => (
        <div key={token.symbol} className="wallet-token-card">

       {/* TOKEN ROW */}
<div
  className="wallet-token-header"
  onClick={() => toggleToken(token.symbol)}
>
  {/* LEFT */}
  <div className="wallet-token-left">
    <img
      src={`/assets/coins/${token.symbol}.png`}
      className="wallet-token-icon"
      alt={token.name}
      onError={(e) => {
        (e.currentTarget as HTMLImageElement).src =
          "/assets/coins/default.png";
      }}
    />

    <div>
      <div className="wallet-token-name">{token.name}</div>
      <div className="wallet-token-symbol">
        {token.symbol.toUpperCase()}
      </div>
    </div>
  </div>

  {/* RIGHT */}
  <div className="wallet-token-right">
    <div className="wallet-token-amount">
      {showBalance
        ? Number(
            (userWalletsGroup as any)?.wallets?.[
              token.symbol.toLowerCase()
            ]?.balance || 0
          ).toFixed(6)
        : "••••••"}
    </div>

    <div className="wallet-token-usd">
      {showBalance
        ? `₦${formatNumber(
            (userWalletsGroup as any)?.wallets?.[
              token.symbol.toLowerCase()
            ]?.ngn_value || 0
          , 2)}`
        : "••••••"}
    </div>
  </div>

  {/* CHEVRON */}
  <IonIcon
    icon={chevronDownOutline}
    className={`wallet-expand-icon ${
      expandedToken === token.symbol ? "open" : ""
    }`}
  />
</div>


          {/* CHAINS */}
          <div
            className={`wallet-chain-wrapper ${
              expandedToken === token.symbol ? "expanded" : ""
            }`}
          >
            {expandedToken === token.symbol && (
              token.wallets.length > 0 ? (
                token.wallets.map((w, i) => (
                  <div key={i} className="wallet-chain-row">

                    <div className="wallet-chain-left">
                      <span className="wallet-chain-tag">
                        {w.network.toUpperCase()}
                      </span>

                      <span className="wallet-address">
                        {shortenAddress(w.address)}
                      </span>
                    </div>

                    <IonIcon
                      icon={copyOutline}
                      className="wallet-copy-icon"
                      onClick={(e) => {
                        e.stopPropagation(); // 🔥 IMPORTANT
                        copy(w.address);
                      }}
                    />
                  </div>
                ))
              ) : (
                <div className="wallet-empty">
                  No wallet created yet
                </div>
              )
            )}
          </div>

        </div>
      ))}

      {/* EMPTY STATE */}
      {groupedWallets.length === 0 && (
        <div className="wallet-empty-state">
          <IonIcon icon={walletOutline} />
          <p>No wallets created yet</p>
        </div>
      )}
    </div>

   
  </div>
)}

   <IonModal isOpen={show} onDidDismiss={() => setShow(false)}>
    <IonHeader>
     <IonToolbar>
      <IonTitle>Create Crypto Wallets</IonTitle>
     </IonToolbar>
    </IonHeader>
    <IonContent className="ion-padding">
     <IonSelect
      placeholder="Select a wallet to create"
      interface="action-sheet"
      onIonChange={(e) => handleSelect(e.detail.value)}
     >
      {tokens.flatMap(({ name, symbol, chains }) =>
       chains
        .filter(
         (chain) =>
          !hasCurrencyAndNetwork(
           userWallets,
           symbol.toLowerCase(),
           chain.toLowerCase()
          )
        )
        .map((chain) => (
         <IonSelectOption
          key={`${symbol}-${chain}`}
          value={`${symbol}:${chain}`}
         >
          {name} ({chain.toUpperCase()})
         </IonSelectOption>
        ))
      )}
     </IonSelect>

     <div className="ion-text-center ion-margin-top">
      <IonButton color="medium" onClick={() => setShow(false)}>
       Close
      </IonButton>
     </div>
    </IonContent>
   </IonModal>

<IonModal
  isOpen={showDepositModal}
  onDidDismiss={() => setShowDepositModal(false)}
  className="full-screen-modal"
>
  <IonHeader>
    <IonToolbar>
   

      <IonTitle>Deposit Crypto</IonTitle>
         <IonButtons slot="end">
        <IonButton onClick={() => setShowDepositModal(false)}>
          Close
        </IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>

  <IonContent>
    <Deposit context={context} />
  </IonContent>
</IonModal>

 <IonModal
  isOpen={showSendModal}
  onDidDismiss={() => setShowSendModal(false)}
  className="full-screen-modal"
>
  <IonHeader>
    <IonToolbar>
   

      <IonTitle>Send Crypto</IonTitle>
         <IonButtons slot="end">
        <IonButton onClick={() => setShowSendModal(false)}>
          Close
        </IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>

  <IonContent>
    <Send context={context} />
  </IonContent>
</IonModal>

 <IonModal
  isOpen={showTradeModal}
  onDidDismiss={() => setShowTradeModal(false)}
  className="full-screen-modal"
>
  <IonHeader>
    <IonToolbar>
   

      <IonTitle>Trade Crypto</IonTitle>
         <IonButtons slot="end">
        <IonButton onClick={() => setShowTradeModal(false)}>
          Close
        </IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>

  <IonContent>
    <Buy context={context} />
  </IonContent>
</IonModal>

<IonModal
  isOpen={showTxModal}
  onDidDismiss={() => setShowTxModal(false)}
  className="full-screen-modal ion-padding"
>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Crypto Transactions</IonTitle>
      <IonButtons slot="end">
        <IonButton onClick={() => setShowTxModal(false)}>
          Close
        </IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>

  <IonContent>
    <Transactions onClose={() => setShowTxModal(false)} />
  </IonContent>
</IonModal>

  </>
 );
};

export default Home;