'use client';

import { DashboardLayout } from '@/components/layout/dashboard-layout';
import { StatCard } from '@/components/ui/stat-card';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  DollarSign,
  ShoppingBag,
  Users,
  TrendingUp,
  ArrowUpRight,
  Clock,
  MapPin,
  Truck,
  Eye,
} from 'lucide-react';
import { demoOrders, demoOrderItems, generateDailyRevenue, generatePopularItems, generateOrdersByType } from '@/lib/demo-data';
import { formatCurrency, formatRelativeTime, getOrderStatusColor, getOrderTypeLabel, cn } from '@/lib/utils';
import Link from 'next/link';

const revenueData = generateDailyRevenue(7);
const popularItems = generatePopularItems().slice(0, 5);
const ordersByType = generateOrdersByType();

function MiniChart() {
  const data = generateDailyRevenue(14);
  const max = Math.max(...data.map((d) => d.revenue));
  return (
    <div className="flex h-16 items-end gap-1">
      {data.map((d, i) => (
        <div
          key={i}
          className="flex-1 rounded-t-sm bg-emerald-500/80 transition-all hover:bg-emerald-500"
          style={{ height: `${(d.revenue / max) * 100}%` }}
        />
      ))}
    </div>
  );
}

export default function OverviewPage() {
  const totalRevenue = revenueData.reduce((s, d) => s + d.revenue, 0);
  const totalOrders = revenueData.reduce((s, d) => s + d.orders, 0);

  return (
    <DashboardLayout>
      <div className="space-y-8">
        {/* 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">
              Dashboard
            </h1>
            <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
              Welcome back, Alex. Here&apos;s what&apos;s happening today.
            </p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <Eye className="h-4 w-4" />
              View Menu
            </Button>
            <Link href="/dashboard/orders">
              <Button variant="primary" size="sm">
                <ShoppingBag className="h-4 w-4" />
                Live Orders
              </Button>
            </Link>
          </div>
        </div>

        {/* Stats Grid */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard
            title="Total Revenue"
            value={formatCurrency(totalRevenue)}
            change="+12.5% from last week"
            changeType="positive"
            icon={DollarSign}
            iconColor="text-emerald-600"
          />
          <StatCard
            title="Orders"
            value={totalOrders.toString()}
            change="+8.2% from last week"
            changeType="positive"
            icon={ShoppingBag}
            iconColor="text-blue-600"
          />
          <StatCard
            title="Avg. Order Value"
            value={formatCurrency(totalRevenue / totalOrders)}
            change="+3.1% from last week"
            changeType="positive"
            icon={TrendingUp}
            iconColor="text-violet-600"
          />
          <StatCard
            title="Active Tables"
            value="5 / 8"
            change="3 available"
            changeType="neutral"
            icon={Users}
            iconColor="text-amber-600"
          />
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          {/* Revenue Chart */}
          <Card className="lg:col-span-2">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Revenue Overview</CardTitle>
              <div className="flex gap-1 rounded-lg border border-zinc-200 p-1 dark:border-zinc-700">
                <button className="rounded-md bg-zinc-900 px-3 py-1 text-xs font-medium text-white dark:bg-white dark:text-zinc-900">7D</button>
                <button className="rounded-md px-3 py-1 text-xs font-medium text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800">14D</button>
                <button className="rounded-md px-3 py-1 text-xs font-medium text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800">30D</button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="mb-4 flex items-baseline gap-3">
                <span className="text-3xl font-bold tracking-tight">{formatCurrency(totalRevenue)}</span>
                <Badge variant="success" className="gap-1">
                  <ArrowUpRight className="h-3 w-3" /> 12.5%
                </Badge>
              </div>
              <MiniChart />
              <div className="mt-3 flex justify-between text-xs text-zinc-400">
                {revenueData.map((d, i) => (
                  <span key={i}>{new Date(d.date).toLocaleDateString('en', { weekday: 'short' })}</span>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Orders by Type */}
          <Card>
            <CardHeader>
              <CardTitle>Orders by Type</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {ordersByType.map((item) => (
                <div key={item.type} className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      {item.type === 'Dine In' && <MapPin className="h-4 w-4 text-emerald-500" />}
                      {item.type === 'Takeaway' && <ShoppingBag className="h-4 w-4 text-blue-500" />}
                      {item.type === 'Delivery' && <Truck className="h-4 w-4 text-violet-500" />}
                      <span className="font-medium">{item.type}</span>
                    </div>
                    <span className="text-zinc-500">{item.count} ({item.percentage}%)</span>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800">
                    <div
                      className={cn(
                        'h-full rounded-full transition-all',
                        item.type === 'Dine In' && 'bg-emerald-500',
                        item.type === 'Takeaway' && 'bg-blue-500',
                        item.type === 'Delivery' && 'bg-violet-500'
                      )}
                      style={{ width: `${item.percentage}%` }}
                    />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-6 lg:grid-cols-2">
          {/* Recent Orders */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Recent Orders</CardTitle>
              <Link href="/dashboard/orders">
                <Button variant="ghost" size="sm" className="text-xs">
                  View All <ArrowUpRight className="h-3 w-3" />
                </Button>
              </Link>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {demoOrders.slice(0, 5).map((order) => (
                  <div key={order.id} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 text-sm font-bold text-zinc-600 dark:bg-zinc-800">
                        #{order.id.split('-')[1]}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{order.customer_name}</p>
                        <div className="flex items-center gap-2 text-xs text-zinc-500">
                          <span>{getOrderTypeLabel(order.order_type)}</span>
                          {order.table_number && <span>• Table {order.table_number}</span>}
                          <span>• <Clock className="inline h-3 w-3" /> {formatRelativeTime(order.created_at)}</span>
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(order.total)}</p>
                      <Badge className={cn('mt-1 text-[10px]', getOrderStatusColor(order.status))} variant="outline">
                        {order.status}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Popular Items */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Popular Items</CardTitle>
              <Link href="/dashboard/analytics">
                <Button variant="ghost" size="sm" className="text-xs">
                  Analytics <ArrowUpRight className="h-3 w-3" />
                </Button>
              </Link>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {popularItems.map((item, index) => (
                  <div key={item.name} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:hover:bg-zinc-800/50">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-50 to-cyan-50 text-sm font-bold text-emerald-600 dark:from-emerald-950/30 dark:to-cyan-950/30">
                        {index + 1}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.name}</p>
                        <p className="text-xs text-zinc-500">{item.orders} orders</p>
                      </div>
                    </div>
                    <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{formatCurrency(item.revenue)}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </DashboardLayout>
  );
}