'use client';

import { DashboardLayout } from '@/components/layout/dashboard-layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { StatCard } from '@/components/ui/stat-card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  DollarSign,
  ShoppingBag,
  TrendingUp,
  Users,
  ArrowUpRight,
  ArrowDownRight,
  QrCode,
  Calendar,
  Download,
} from 'lucide-react';
import { generateDailyRevenue, generatePopularItems, generateOrdersByType, generateHourlyOrders } from '@/lib/demo-data';
import { formatCurrency, cn } from '@/lib/utils';
import { useState } from 'react';

const revenueData = generateDailyRevenue(30);
const popularItems = generatePopularItems();
const ordersByType = generateOrdersByType();
const hourlyOrders = generateHourlyOrders();

function BarChart({ data, dataKey, maxHeight = 120 }: { data: { [key: string]: string | number }[]; dataKey: string; maxHeight?: number }) {
  const values = data.map((d) => Number(d[dataKey]));
  const max = Math.max(...values);

  return (
    <div className="flex items-end gap-[3px]" style={{ height: maxHeight }}>
      {data.map((d, i) => (
        <div
          key={i}
          className="group relative flex-1 rounded-t-sm bg-emerald-500/80 transition-all hover:bg-emerald-500"
          style={{ height: `${(Number(d[dataKey]) / max) * 100}%` }}
        >
          <div className="absolute -top-8 left-1/2 -translate-x-1/2 hidden rounded-md bg-zinc-900 px-2 py-1 text-[10px] font-medium text-white shadow-lg group-hover:block whitespace-nowrap">
            {typeof d[dataKey] === 'number' && dataKey === 'revenue' ? formatCurrency(Number(d[dataKey])) : d[dataKey]}
          </div>
        </div>
      ))}
    </div>
  );
}

function HeatmapRow({ label, values, max }: { label: string; values: number[]; max: number }) {
  return (
    <div className="flex items-center gap-1">
      <span className="w-10 text-[10px] text-zinc-400 shrink-0">{label}</span>
      {values.map((v, i) => (
        <div
          key={i}
          className="h-6 flex-1 rounded-sm transition-all hover:ring-1 hover:ring-emerald-500"
          style={{
            backgroundColor: `rgba(16, 185, 129, ${v / max})`,
          }}
          title={`${v} orders`}
        />
      ))}
    </div>
  );
}

export default function AnalyticsPage() {
  const [period, setPeriod] = useState('30d');
  const totalRevenue = revenueData.reduce((s, d) => s + d.revenue, 0);
  const totalOrders = revenueData.reduce((s, d) => s + d.orders, 0);
  const avgOrder = totalRevenue / totalOrders;

  return (
    <DashboardLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Analytics</h1>
            <p className="mt-1 text-sm text-zinc-500">Track performance, revenue, and customer insights.</p>
          </div>
          <div className="flex items-center gap-2">
            <div className="flex gap-1 rounded-xl border border-zinc-200 p-1 dark:border-zinc-700">
              {['7d', '14d', '30d', '90d'].map((p) => (
                <button
                  key={p}
                  onClick={() => setPeriod(p)}
                  className={cn(
                    'rounded-lg px-3 py-1.5 text-xs font-medium transition-all',
                    period === p ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                  )}
                >
                  {p}
                </button>
              ))}
            </div>
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4" /> Export
            </Button>
          </div>
        </div>

        {/* Stats */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard title="Total Revenue" value={formatCurrency(totalRevenue)} change="+12.5% vs prev. period" changeType="positive" icon={DollarSign} iconColor="text-emerald-600" />
          <StatCard title="Total Orders" value={totalOrders.toString()} change="+8.2% vs prev. period" changeType="positive" icon={ShoppingBag} iconColor="text-blue-600" />
          <StatCard title="Avg. Order Value" value={formatCurrency(avgOrder)} change="+3.1% vs prev. period" changeType="positive" icon={TrendingUp} iconColor="text-violet-600" />
          <StatCard title="QR Scans" value="2,011" change="+24.3% vs prev. period" changeType="positive" icon={QrCode} iconColor="text-amber-600" />
        </div>

        {/* Revenue Chart */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle>Revenue Over Time</CardTitle>
              <p className="mt-1 text-sm text-zinc-500">Daily revenue for the last 30 days</p>
            </div>
            <div className="flex items-baseline gap-3">
              <span className="text-2xl font-bold">{formatCurrency(totalRevenue)}</span>
              <Badge variant="success" className="gap-1">
                <ArrowUpRight className="h-3 w-3" /> 12.5%
              </Badge>
            </div>
          </CardHeader>
          <CardContent>
            <BarChart data={revenueData} dataKey="revenue" maxHeight={160} />
            <div className="mt-2 flex justify-between text-[10px] text-zinc-400">
              {revenueData.filter((_, i) => i % 5 === 0).map((d, i) => (
                <span key={i}>{new Date(d.date).toLocaleDateString('en', { month: 'short', day: 'numeric' })}</span>
              ))}
            </div>
          </CardContent>
        </Card>

        <div className="grid gap-6 lg:grid-cols-2">
          {/* Popular Items */}
          <Card>
            <CardHeader>
              <CardTitle>Top Selling Items</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {popularItems.map((item, i) => {
                  const maxOrders = popularItems[0].orders;
                  return (
                    <div key={item.name} className="flex items-center gap-3">
                      <span className="w-6 text-center text-sm font-bold text-zinc-400">
                        {i + 1}
                      </span>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center justify-between">
                          <p className="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.name}</p>
                          <p className="ml-2 shrink-0 text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(item.revenue)}</p>
                        </div>
                        <div className="mt-1.5 flex items-center gap-2">
                          <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                            <div
                              className="h-full rounded-full bg-gradient-to-r from-emerald-500 to-cyan-500"
                              style={{ width: `${(item.orders / maxOrders) * 100}%` }}
                            />
                          </div>
                          <span className="text-xs text-zinc-400">{item.orders}</span>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          {/* Peak Hours */}
          <Card>
            <CardHeader>
              <CardTitle>Peak Hours</CardTitle>
            </CardHeader>
            <CardContent>
              <BarChart data={hourlyOrders} dataKey="orders" maxHeight={140} />
              <div className="mt-2 flex justify-between text-[10px] text-zinc-400">
                {hourlyOrders.map((h, i) => (
                  i % 2 === 0 ? <span key={i}>{h.hour}</span> : <span key={i} />
                ))}
              </div>
              <div className="mt-4 grid grid-cols-2 gap-3">
                <div className="rounded-xl bg-emerald-50 p-3 dark:bg-emerald-950/30">
                  <p className="text-xs text-emerald-600">Lunch Peak</p>
                  <p className="text-lg font-bold text-emerald-700 dark:text-emerald-400">12:00 – 14:00</p>
                </div>
                <div className="rounded-xl bg-violet-50 p-3 dark:bg-violet-950/30">
                  <p className="text-xs text-violet-600">Dinner Peak</p>
                  <p className="text-lg font-bold text-violet-700 dark:text-violet-400">18:00 – 21:00</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Order Distribution */}
        <div className="grid gap-6 lg:grid-cols-3">
          {ordersByType.map((item) => (
            <Card key={item.type}>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-zinc-500">{item.type}</p>
                    <p className="mt-1 text-3xl font-bold">{item.count}</p>
                    <p className="mt-0.5 text-xs text-zinc-500">{item.percentage}% of total</p>
                  </div>
                  <div className="relative h-20 w-20">
                    <svg className="h-20 w-20 -rotate-90" viewBox="0 0 36 36">
                      <path
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="3"
                        className="text-zinc-100 dark:text-zinc-800"
                      />
                      <path
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="3"
                        strokeDasharray={`${item.percentage}, 100`}
                        className={cn(
                          item.type === 'Dine In' && 'text-emerald-500',
                          item.type === 'Takeaway' && 'text-blue-500',
                          item.type === 'Delivery' && 'text-violet-500'
                        )}
                      />
                    </svg>
                    <div className="absolute inset-0 flex items-center justify-center text-sm font-bold">
                      {item.percentage}%
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </DashboardLayout>
  );
}