'use client';

import React, { useState } from 'react';
import {
  StatCard,
  DataTable,
  StatusBadge,
  Sparkline,
  SpotlightTour,
  useTour,
  formatVND,
  type ColumnDef,
} from '@kido/admin-ui';
import { ShoppingCart, DollarSign, Users, AlertCircle } from 'lucide-react';

interface OrderRecord {
  id: string;
  customerName: string;
  totalAmount: number;
  status: 'PAID' | 'PENDING' | 'CANCELLED';
  trend: number[];
}

const TOUR_STEPS = [
  {
    target: '#stat-revenue',
    title: 'Revenue Snapshot',
    content: 'Real-time sales revenue with 7-day trendline.',
  },
  {
    target: '#orders-table',
    title: 'Orders Workbench',
    content: 'Filter, sort, and manage live customer orders.',
  },
];

export function OperationsDashboard() {
  const { currentStep, isTourActive, nextStep, prevStep, endTour } = useTour({
    tourKey: 'ops_v1_tour',
    steps: TOUR_STEPS,
  });

  const [orders] = useState<OrderRecord[]>([
    { id: 'ORD-501', customerName: 'Hoang Minh', totalAmount: 450000, status: 'PAID', trend: [12, 18, 25, 20, 32] },
    { id: 'ORD-502', customerName: 'Le Thu Trang', totalAmount: 180000, status: 'PENDING', trend: [5, 9, 14, 11, 16] },
    { id: 'ORD-503', customerName: 'Tran Van Bao', totalAmount: 890000, status: 'CANCELLED', trend: [20, 15, 8, 4, 2] },
  ]);

  const columns: ColumnDef<OrderRecord>[] = [
    { accessorKey: 'id', header: 'Order ID' },
    { accessorKey: 'customerName', header: 'Customer' },
    {
      accessorKey: 'totalAmount',
      header: 'Total',
      cell: ({ row }) => formatVND(row.original.totalAmount),
    },
    {
      accessorKey: 'status',
      header: 'Status',
      cell: ({ row }) => (
        <StatusBadge
          status={
            row.original.status === 'PAID'
              ? 'SUCCESS'
              : row.original.status === 'PENDING'
              ? 'PENDING'
              : 'DANGER'
          }
        >
          {row.original.status}
        </StatusBadge>
      ),
    },
    {
      id: 'trend',
      header: '7-Day Activity',
      cell: ({ row }) => (
        <div className="w-24 h-6">
          <Sparkline
            data={row.original.trend}
            strokeColor={row.original.status === 'CANCELLED' ? '#ef4444' : '#10b981'}
            fillColor={row.original.status === 'CANCELLED' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(16, 185, 129, 0.1)'}
          />
        </div>
      ),
    },
  ];

  return (
    <div className="p-8 space-y-8 bg-slate-950 text-slate-100 min-h-screen">
      {/* 1. Metric Overview Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div id="stat-revenue">
          <StatCard
            title="Today's Revenue"
            value={formatVND(1520000)}
            delta="+18.4%"
            isPositive={true}
            icon={<DollarSign className="w-5 h-5 text-emerald-400" />}
            sparkline={<Sparkline data={[10, 22, 18, 35, 42, 58, 64]} strokeColor="#10b981" />}
          />
        </div>
        <StatCard
          title="Active Orders"
          value="48"
          delta="+5.2%"
          isPositive={true}
          icon={<ShoppingCart className="w-5 h-5 text-blue-400" />}
        />
        <StatCard
          title="Refund Rate"
          value="0.8%"
          delta="-0.3%"
          isPositive={true}
          icon={<AlertCircle className="w-5 h-5 text-purple-400" />}
        />
      </div>

      {/* 2. Orders Table */}
      <div id="orders-table" className="bg-slate-900 border border-slate-800 rounded-2xl p-6">
        <h2 className="text-xl font-semibold mb-4">Recent Transactions</h2>
        <DataTable columns={columns} data={orders} />
      </div>

      {/* 3. Interactive Guided Spotlight Tour */}
      <SpotlightTour
        isActive={isTourActive}
        step={currentStep}
        onNext={nextStep}
        onPrev={prevStep}
        onClose={endTour}
      />
    </div>
  );
}