'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {BarChartView} from '@/shared/components/charts/BarChartView';
import {useWorkspace} from '@/shared/providers/WorkspaceProvider';
import {getOrdersTrendData} from '../../services/commerceService';

export function OrdersChart() {
  const {storeId, range} = useWorkspace();
  const data = getOrdersTrendData(storeId, range);

  const totalOrders = data.reduce((acc, curr) => acc + curr.Orders, 0);

  return (
    <div className="rounded-xl border border-border bg-card p-4 space-y-3 overflow-hidden shadow-sm">
      <div className="flex items-center justify-between">
        <div>
          <Heading level={4} className="text-base font-bold text-white">
            Orders Volume Trend
          </Heading>
          <Text size="sm" color="secondary">
            Completed order count grouped by hourly buckets
          </Text>
        </div>
        <span className="text-xs font-bold text-white bg-zinc-800 px-2.5 py-1 rounded-full border border-zinc-700">
          {totalOrders.toLocaleString()} Orders
        </span>
      </div>

      <div className="h-64 w-full pt-2">
        <BarChartView
          data={data}
          xKey="time"
          series={[{key: 'Orders', label: 'Completed Orders'}]}
          height="100%"
        />
      </div>
    </div>
  );
}
