'use client';

import {Heading, Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';
import {COMMERCE_KPIS, PAYMENT_BREAKDOWN_DATA} from '../../services/commerceService';

export function BusinessPulsePanel() {
  return (
    <div className="h-full w-full overflow-y-auto p-4 space-y-4 bg-background text-white">
      {/* Pulse Header */}
      <div className="flex items-center justify-between pb-2 border-b border-border">
        <div>
          <Heading level={3} className="text-sm font-bold text-white flex items-center gap-2">
            <span className="size-2 rounded-full bg-emerald-500 animate-pulse" />
            Business Pulse
          </Heading>
          <Text size="sm" color="secondary">
            Live telemetry stream
          </Text>
        </div>
        <Badge variant="success" label="Active" />
      </div>

      {/* Pulse Cards */}
      <div className="space-y-3">
        {/* Today's Revenue */}
        <div className="rounded-xl border border-border bg-card p-3 flex justify-between items-center shadow-sm">
          <div>
            <div className="text-xs font-semibold text-zinc-400">Today's Revenue</div>
            <div className="text-lg font-bold text-white tabular-nums">{COMMERCE_KPIS.revenue.value}</div>
          </div>
          <span className="text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
            {COMMERCE_KPIS.revenue.change}
          </span>
        </div>

        {/* Today's Orders */}
        <div className="rounded-xl border border-border bg-card p-3 flex justify-between items-center shadow-sm">
          <div>
            <div className="text-xs font-semibold text-zinc-400">Today's Orders</div>
            <div className="text-lg font-bold text-white tabular-nums">{COMMERCE_KPIS.orders.value}</div>
          </div>
          <span className="text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
            {COMMERCE_KPIS.orders.change}
          </span>
        </div>

        {/* Active Promotions */}
        <div className="rounded-xl border border-border bg-card p-3 space-y-1 shadow-sm">
          <div className="flex items-center justify-between text-xs font-bold text-white">
            <span className="flex items-center gap-1.5">
              <Icon icon={ICONS.activeRewards} size="sm" className="text-amber-400" />
              Active Promotions
            </span>
            <Badge variant="info" label="3 Running" />
          </div>
          <div className="text-[11px] text-zinc-400 font-medium">
            Weekend Double LYT & Espresso Bundle driving +14% lift
          </div>
        </div>

        {/* Inventory Alerts */}
        <div className="rounded-xl border border-amber-500/30 bg-amber-500/[0.04] p-3 space-y-1 shadow-sm">
          <div className="flex items-center justify-between text-xs font-bold text-amber-300">
            <span className="flex items-center gap-1.5">
              <Icon icon={ICONS.alert} size="sm" className="text-amber-400" />
              Inventory Alert
            </span>
            <Badge variant="warning" label="2 Items" />
          </div>
          <div className="text-[11px] text-zinc-400">
            Cold Brew Pack (18 left) & Barista Mug (8 left)
          </div>
        </div>

        {/* Payment Split */}
        <div className="rounded-xl border border-border bg-card p-3 space-y-2 shadow-sm">
          <div className="text-xs font-bold text-white flex justify-between">
            <span>Payment Method Split</span>
            <span className="text-emerald-400">UPI 58%</span>
          </div>
          <div className="h-1.5 w-full rounded-full bg-zinc-800 overflow-hidden flex">
            {PAYMENT_BREAKDOWN_DATA.map((p) => (
              <div
                key={p.method}
                style={{width: `${p.percentage}%`, backgroundColor: p.color}}
                className="h-full"
              />
            ))}
          </div>
        </div>

        {/* Top Store */}
        <div className="rounded-xl border border-border bg-card p-3 space-y-1 shadow-sm">
          <div className="text-xs font-semibold text-zinc-400">Top Performing Store</div>
          <div className="text-sm font-bold text-white">{COMMERCE_KPIS.topStore?.value ?? 'Indiranagar Flagship'}</div>
          <div className="text-[11px] text-zinc-400">{COMMERCE_KPIS.topStore?.subtitle ?? '₹9.1L Revenue (23.8% Conv)'}</div>
        </div>

        {/* Recent Transactions */}
        <div className="rounded-xl border border-border bg-card p-3 space-y-2 shadow-sm">
          <div className="text-xs font-bold text-white">Recent Transactions</div>
          <div className="space-y-2 divide-y divide-zinc-800">
            {[
              {id: 't1', code: '#LYT-9842', name: 'Aarav Sharma', amount: '₹2,450', time: '2m ago'},
              {id: 't2', code: '#LYT-9841', name: 'Priya Patel', amount: '₹1,890', time: '5m ago'},
              {id: 't3', code: '#LYT-9840', name: 'Rohan Mehta', amount: '₹3,120', time: '12m ago'},
            ].map((t) => (
              <div key={t.id} className="pt-1.5 first:pt-0 flex items-center justify-between text-xs">
                <div>
                  <div className="font-bold text-white">{t.code}</div>
                  <div className="text-[10px] text-zinc-400">{t.name}</div>
                </div>
                <div className="text-right">
                  <div className="font-bold text-white tabular-nums">{t.amount}</div>
                  <div className="text-[10px] text-zinc-400">{t.time}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
