import { useQuery } from '@tanstack/react-query';
import { Center, LinkButton, Segmented, Spinner } from '@barev/ui';
import { useI18n, useTRPC } from '@barev/web';
import { useState } from 'react';
import { OrderRow, PageHead } from '../lib.tsx';

export function Orders() {
  const { t } = useI18n();
  const trpc = useTRPC();
  const orders = useQuery({ ...trpc.client.orders.list.queryOptions(), refetchInterval: 20_000 });
  const [tab, setTab] = useState<'active' | 'history'>('active');
  if (!orders.data)
    return (
      <Center>
        <Spinner />
      </Center>
    );
  const list = orders.data[tab];
  return (
    <main className="app">
      <PageHead title={t('client.orders.title')} />
      <Segmented
        value={tab}
        onChange={setTab}
        options={[
          { value: 'active', label: `${t('client.orders.active')} · ${orders.data.active.length}` },
          { value: 'history', label: t('client.orders.history') },
        ]}
      />
      {list.length === 0 ? (
        <div className="bc-stack" style={{ alignItems: 'center', padding: 24 }}>
          <p className="bc-muted">{t(tab === 'active' ? 'client.home.noOrders' : 'client.orders.noHistory')}</p>
          <LinkButton href="#/services">{t('client.orders.order')}</LinkButton>
        </div>
      ) : (
        <div className="bc-stack" style={{ gap: 8 }}>
          {list.map((o) => (
            <OrderRow key={o.id} o={o} />
          ))}
        </div>
      )}
    </main>
  );
}