import { Link } from 'react-router-dom';

import { useOffice24 } from './useOffice24';

import FineractLedgerBanner from '../omnl-dashboard/FineractLedgerBanner';

import DashboardStatCard from '../omnl-dashboard/DashboardStatCard';

import DashboardSection from '../omnl-dashboard/DashboardSection';

import QuickPortalLinks from '../omnl-dashboard/QuickPortalLinks';

import NasaPageHeader from '../omnl-dashboard/NasaPageHeader';

import NasaIcon, { StatusIcon } from '../../components/icons/NasaIcon';

import { formatUsd } from '../../utils/formatMoney';



export default function Office24Dashboard() {

  const { office, tokens, health, moneySupply, loading, refresh } = useOffice24();

  const profile = office as {

    officeId?: number;

    externalId?: string;

    name?: string;

    locked?: boolean;

    tenantUser?: string;

    settlement?: { defaultCurrency?: string; moneyLayers?: string[] };

    rails?: { swift?: { enabled?: boolean }; hybx?: { enabled?: boolean }; chain138?: { enabled?: boolean } };

  } | null;



  return (

    <div className="dash-page o24-page max-w-[1400px] mx-auto px-4 py-6">

      <div className="flex flex-wrap items-start justify-between gap-4 mb-2">

        <div className="flex-1 min-w-0">

          <NasaPageHeader

            icon="office"

            missionId="O24-138"

            title={profile?.name ?? 'HOSPITALLERS — Zardasht (Iraq / Iran Operations)'}

            subtitle={profile?.externalId ?? 'HOSPITALLERS-ZARDASHT-IRAQ-IRAN'}

            badges={

              <>

                <span className="nasa-badge nasa-badge--nominal">Office 24</span>

                {profile?.locked && <span className="nasa-badge nasa-badge--caution">Single office · locked</span>}

              </>

            }

          />

        </div>

        <div className="flex flex-wrap gap-2 pt-2">

          <Link to="/central-bank" className="nasa-btn inline-flex items-center gap-1">

            <NasaIcon name="central-bank" size={12} /> Central Bank

          </Link>

          <Link to="/trade" className="nasa-btn nasa-btn--primary inline-flex items-center gap-1">

            <NasaIcon name="trade" size={12} /> DBIS Trade

          </Link>

        </div>

      </div>



      <QuickPortalLinks />



      <FineractLedgerBanner moneySupply={moneySupply} loading={loading} officeName={profile?.name} />



      <h2 className="dash-section-title mb-1 flex items-center gap-2">

        <NasaIcon name="ledger" size={14} className="nasa-icon--telemetry" />

        Office balances

      </h2>

      <p className="dash-section-subtitle mb-4">Live Fineract · {profile?.settlement?.defaultCurrency ?? 'USD'}</p>



      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">

        <DashboardStatCard label="Office ID" value={String(profile?.officeId ?? 24)} hint="Fineract office · HOSPITALLERS Ali" accent="green" icon="office" />

        <DashboardStatCard label="M1 circulating" value={formatUsd(moneySupply?.M1?.circulating)} hint="GL 2100 · spendable M1 liability" accent="green" icon="money" />

        <DashboardStatCard label="Due from head office" value={formatUsd(moneySupply?.interoffice?.dueFromHeadOffice)} hint="GL 1410 · HO allocation receivable" accent="blue" icon="rail" />

        <DashboardStatCard label="M2 tokens" value={String(tokens.length)} hint="Registered · swap · convert · transfer" accent="gold" icon="rocket" />

      </div>



      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

        <DashboardSection

          title="Settlement rails"

          subtitle="Enabled payment and chain paths"

          icon="network"

          action={

            <button type="button" onClick={() => refresh()} className="text-xs text-[#00d4ff] hover:underline inline-flex items-center gap-1">

              <NasaIcon name="refresh" size={12} className={loading ? 'nasa-icon--spin' : ''} />

              {loading ? 'Refreshing…' : 'Refresh'}

            </button>

          }

        >

          <dl>

            <div className="dash-kv">

              <dt className="flex items-center gap-1"><NasaIcon name="globe" size={12} /> SWIFT</dt>

              <dd className="flex items-center justify-end gap-1">

                <StatusIcon ok={!!profile?.rails?.swift?.enabled} />

                {profile?.rails?.swift?.enabled ? 'Enabled' : 'Off'}

              </dd>

            </div>

            <div className="dash-kv">

              <dt className="flex items-center gap-1"><NasaIcon name="rail" size={12} /> HYBX</dt>

              <dd className="flex items-center justify-end gap-1">

                <StatusIcon ok={!!profile?.rails?.hybx?.enabled} />

                {profile?.rails?.hybx?.enabled ? 'Enabled' : 'Off'}

              </dd>

            </div>

            <div className="dash-kv">

              <dt className="flex items-center gap-1"><NasaIcon name="network" size={12} /> Chain 138</dt>

              <dd className="flex items-center justify-end gap-1">

                <StatusIcon ok={!!profile?.rails?.chain138?.enabled} />

                {profile?.rails?.chain138?.enabled ? 'Enabled' : 'Off'}

              </dd>

            </div>

            <div className="dash-kv">

              <dt className="flex items-center gap-1"><NasaIcon name="trade" size={12} /> DBIS Exchange</dt>

              <dd className="dash-kv-value--ok flex items-center justify-end gap-1">

                <StatusIcon ok={(health as { status?: string })?.status === 'ok'} />

                {(health as { status?: string })?.status ?? 'ok'}

              </dd>

            </div>

            <div className="dash-kv">

              <dt>Fineract tenant</dt>

              <dd className="text-xs font-mono">{profile?.tenantUser ?? 'ali_hospitallers_tenant'}</dd>

            </div>

          </dl>

        </DashboardSection>



        <DashboardSection title="M2 token registry" subtitle="Tradable lines on Chain 138" icon="rocket" className="lg:col-span-2">

          <div className="overflow-x-auto max-h-[420px] overflow-y-auto rounded border border-[#1e4a8a]">

            <table className="w-full text-sm nasa-table">

              <thead className="sticky top-0">

                <tr className="text-left">

                  <th className="py-2.5 px-3">Symbol</th>

                  <th className="py-2.5 px-3">Line</th>

                  <th className="py-2.5 px-3">Swap</th>

                  <th className="py-2.5 px-3">Convert</th>

                  <th className="py-2.5 px-3">Transfer</th>

                </tr>

              </thead>

              <tbody>

                {tokens.map((t) => (

                  <tr key={t.address}>

                    <td className="py-2.5 px-3 font-medium font-mono text-[#e8f4ff]">{t.symbol}</td>

                    <td className="py-2.5 px-3 text-[#7a9bb8] text-xs">{t.omnlLine ?? 'M2'}</td>

                    <td className="py-2.5 px-3"><StatusIcon ok={t.swappable !== false} /></td>

                    <td className="py-2.5 px-3"><StatusIcon ok={t.convertible !== false} /></td>

                    <td className="py-2.5 px-3">

                      <StatusIcon ok={!!(t.transferableInternal || t.transferableExternal)} />

                    </td>

                  </tr>

                ))}

                {!tokens.length && (

                  <tr>

                    <td colSpan={5} className="py-6 px-3 text-center text-[#7a9bb8]">No M2 tokens loaded</td>

                  </tr>

                )}

              </tbody>

            </table>

          </div>

        </DashboardSection>

      </div>

    </div>

  );

}

