'use client';

import {Heading, Text} from '@astryxdesign/core/Text';

const ORDER_FLOW = [
  {step: 'Customer', detail: 'Identified / Guest'},
  {step: 'Purchase', detail: 'Cart Checkout'},
  {step: 'Payment', detail: 'UPI / Card Auth'},
  {step: 'Order', detail: 'KDS & POS Created'},
  {step: 'Packing', detail: 'Fulfillment Prep'},
  {step: 'Delivery', detail: 'Dispatch / Pickup'},
  {step: 'Completed', detail: 'Ledger Settled'},
];

const REVENUE_FLOW = [
  {step: 'Visitor', detail: 'Store / Web Traffic'},
  {step: 'Conversion', detail: 'Checkout Rate'},
  {step: 'Order', detail: 'Gross Volume'},
  {step: 'Revenue', detail: 'Net Payment'},
  {step: 'Profit', detail: 'Margin Settled'},
];

const INVENTORY_FLOW = [
  {step: 'Supplier', detail: 'PO Placed'},
  {step: 'Warehouse', detail: 'Stock Received'},
  {step: 'Store', detail: 'Shelf Allocation'},
  {step: 'Customer', detail: 'Item Fulfilled'},
];

export function OperationalFlowcharts() {
  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-6 shadow-sm overflow-hidden">
      <div>
        <Heading level={4} className="text-base font-bold text-white">
          Operational Flow Diagrams
        </Heading>
        <Text size="sm" color="secondary">
          Visual operational pipeline lifecycle maps for orders, revenue settlements and inventory movement
        </Text>
      </div>

      {/* Order Flow Diagram */}
      <div className="space-y-2">
        <span className="text-xs font-bold text-amber-400 uppercase tracking-wider">
          1. Order Lifecycle Flow
        </span>
        <div className="overflow-x-auto pb-2">
          <div className="flex items-center gap-2 min-w-[640px]">
            {ORDER_FLOW.map((node, i) => (
              <div key={node.step} className="flex items-center gap-2 flex-1">
                <div className="flex-1 rounded-lg border border-zinc-700 bg-zinc-900/90 p-2.5 text-center shadow-sm">
                  <div className="text-xs font-bold text-white">{node.step}</div>
                  <div className="text-[10px] text-zinc-400 font-medium mt-0.5">{node.detail}</div>
                </div>
                {i < ORDER_FLOW.length - 1 ? (
                  <span className="text-zinc-500 font-bold text-sm shrink-0">→</span>
                ) : null}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Revenue Flow Diagram */}
      <div className="space-y-2">
        <span className="text-xs font-bold text-emerald-400 uppercase tracking-wider">
          2. Revenue Settlement Flow
        </span>
        <div className="overflow-x-auto pb-2">
          <div className="flex items-center gap-2 min-w-[500px]">
            {REVENUE_FLOW.map((node, i) => (
              <div key={node.step} className="flex items-center gap-2 flex-1">
                <div className="flex-1 rounded-lg border border-emerald-950/60 bg-emerald-950/20 p-2.5 text-center shadow-sm">
                  <div className="text-xs font-bold text-emerald-300">{node.step}</div>
                  <div className="text-[10px] text-zinc-400 font-medium mt-0.5">{node.detail}</div>
                </div>
                {i < REVENUE_FLOW.length - 1 ? (
                  <span className="text-emerald-600 font-bold text-sm shrink-0">→</span>
                ) : null}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Inventory Flow Diagram */}
      <div className="space-y-2">
        <span className="text-xs font-bold text-indigo-400 uppercase tracking-wider">
          3. Inventory & Supply Chain Flow
        </span>
        <div className="overflow-x-auto pb-2">
          <div className="flex items-center gap-2 min-w-[450px]">
            {INVENTORY_FLOW.map((node, i) => (
              <div key={node.step} className="flex items-center gap-2 flex-1">
                <div className="flex-1 rounded-lg border border-indigo-950/60 bg-indigo-950/20 p-2.5 text-center shadow-sm">
                  <div className="text-xs font-bold text-indigo-300">{node.step}</div>
                  <div className="text-[10px] text-zinc-400 font-medium mt-0.5">{node.detail}</div>
                </div>
                {i < INVENTORY_FLOW.length - 1 ? (
                  <span className="text-indigo-600 font-bold text-sm shrink-0">→</span>
                ) : null}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
