import React from 'react';
import { 
  Printer, 
  Tag, 
  AlertTriangle, 
  Clock, 
  TrendingUp, 
  Plus,
  FileText,
  Users,
  UserCircle,
  Package,
  MapPin,
  ArrowUpRight,
  ArrowDownRight
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../ui/card";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell
} from 'recharts';
import { ScrollArea } from "../ui/scroll-area";

// --- Mock Data ---

const WEEKLY_PRINT_DATA = [
  { day: 'Mon', labels: 145 },
  { day: 'Tue', labels: 230 },
  { day: 'Wed', labels: 185 },
  { day: 'Thu', labels: 278 },
  { day: 'Fri', labels: 190 },
  { day: 'Sat', labels: 120 },
  { day: 'Sun', labels: 85 },
];

const CATEGORY_DATA = [
  { name: 'Prep', value: 450, color: '#3b82f6' },
  { name: 'Grab & Go', value: 320, color: '#10b981' },
  { name: 'Catering', value: 150, color: '#f59e0b' },
  { name: 'Delivery', value: 80, color: '#6366f1' },
];

const RECENT_LABELS = [
  { id: '1-251201', product: 'Chicken Breast', template: '2" Prep', user: 'Alice J.', time: '10 mins ago', status: 'active' },
  { id: '1-251202', product: 'Caesar Salad', template: '3" Grab\'n\'Go', user: 'Bob S.', time: '25 mins ago', status: 'active' },
  { id: '1-251203', product: 'Tomato Soup', template: '2" Prep', user: 'Charlie B.', time: '40 mins ago', status: 'expired' },
  { id: '1-251204', product: 'Roast Beef', template: '2" x 2" Prep', user: 'Alice J.', time: '1 hour ago', status: 'active' },
  { id: '1-251205', product: 'Iced Tea', template: 'Beverage Label', user: 'David W.', time: '1 hour ago', status: 'active' },
];

const ACTIVE_TIMERS = [
  { title: 'Coffee Station', time: '12:45', status: 'running' },
  { title: 'Sanitizer Bucket', time: '04:20', status: 'warning' },
  { title: 'Hot Hold Unit 1', time: '00:00', status: 'expired' },
];

export function Dashboard() {
  return (
    <div className="space-y-6">
      {/* Top Hierarchy / Welcome Bar */}
      <div className="bg-white border border-gray-200 p-4 rounded-xl shadow-sm flex flex-col md:flex-row justify-between items-center gap-4">
        <div>
           <h1 className="text-xl font-bold" style={{ color: '#2b328f' }}>Dashboard Overview</h1>
           <p className="text-sm text-gray-500">Welcome back, Admin. Here's what's happening today.</p>
        </div>
        <div className="flex items-center gap-3">
           <Button className="bg-blue-600 text-white hover:bg-blue-700 font-medium">
             <Plus className="w-4 h-4 mr-2" /> New Label
           </Button>
           <Button variant="outline">
             View Reports
           </Button>
        </div>
      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <KPICard 
          title="Labels Printed Today" 
          value="342" 
          trend="+12%" 
          trendUp={true} 
          icon={Printer} 
          color="text-blue-600" 
          bgColor="bg-blue-50"
        />
        <KPICard 
          title="Active Templates" 
          value="24" 
          trend="+2 New" 
          trendUp={true} 
          icon={FileText} 
          color="text-indigo-600" 
          bgColor="bg-indigo-50"
        />
        <KPICard 
          title="Active Users" 
          value="8" 
          trend="Online Now" 
          trendUp={true} 
          icon={Users} 
          color="text-emerald-600" 
          bgColor="bg-emerald-50"
        />
        <KPICard 
          title="Locations" 
          value="12" 
          trend="+1 New" 
          trendUp={true} 
          icon={MapPin} 
          color="text-sky-600" 
          bgColor="bg-sky-50"
        />
        <KPICard 
          title="People" 
          value="48" 
          trend="+3 New" 
          trendUp={true} 
          icon={UserCircle} 
          color="text-violet-600" 
          bgColor="bg-violet-50"
        />
        <KPICard 
          title="Menu Products" 
          value="156" 
          trend="+8 New" 
          trendUp={true} 
          icon={Package} 
          color="text-amber-600" 
          bgColor="bg-amber-50"
        />
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left Column (Charts) */}
        <div className="lg:col-span-2 space-y-6">
          {/* Print Volume Chart */}
          <Card className="shadow-sm border-gray-200">
            <CardHeader>
              <CardTitle className="text-base font-bold text-gray-800 flex items-center gap-2">
                <TrendingUp className="w-5 h-5 text-gray-500" />
                Weekly Print Volume
              </CardTitle>
              <CardDescription>Number of labels printed over the last 7 days</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[300px] w-full">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={WEEKLY_PRINT_DATA}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
                    <XAxis 
                      dataKey="day" 
                      axisLine={false} 
                      tickLine={false} 
                      tick={{ fill: '#6b7280', fontSize: 12 }} 
                      dy={10}
                    />
                    <YAxis 
                      axisLine={false} 
                      tickLine={false} 
                      tick={{ fill: '#6b7280', fontSize: 12 }} 
                    />
                    <Tooltip 
                      contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                      cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
                    />
                    <Line 
                      type="monotone" 
                      dataKey="labels" 
                      stroke="#2563eb" 
                      strokeWidth={3} 
                      dot={{ r: 4, fill: '#2563eb', strokeWidth: 2, stroke: '#fff' }}
                      activeDot={{ r: 6 }}
                    />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>

          {/* Recent Labels Table */}
          <Card className="shadow-sm border-gray-200">
             <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle className="text-base font-bold text-gray-800 flex items-center gap-2">
                  <Tag className="w-5 h-5 text-gray-500" />
                  Recent Labels
                </CardTitle>
                <CardDescription>Latest printed labels across all locations</CardDescription>
              </div>
              <Button variant="ghost" size="sm" className="text-blue-600">View All</Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {RECENT_LABELS.map((label) => (
                  <div key={label.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100 hover:bg-gray-100 transition-colors">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-xs">
                        {label.template.substring(0, 2)}
                      </div>
                      <div>
                        <p className="text-sm font-semibold text-gray-900">{label.product}</p>
                        <p className="text-xs text-gray-500">{label.id} • {label.user}</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <span className="text-xs text-gray-500 font-medium">{label.time}</span>
                      <Badge 
                        variant="secondary" 
                        className={label.status === 'expired' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}
                      >
                        {label.status}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right Column (Widgets) */}
        <div className="space-y-6">
          
          {/* Category Distribution */}
          <Card className="shadow-sm border-gray-200">
            <CardHeader>
              <CardTitle className="text-base font-bold text-gray-800 flex items-center gap-2">
                <Package className="w-5 h-5 text-gray-500" />
                By Category
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-[200px] relative">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie
                      data={CATEGORY_DATA}
                      cx="50%"
                      cy="50%"
                      innerRadius={60}
                      outerRadius={80}
                      paddingAngle={5}
                      dataKey="value"
                    >
                      {CATEGORY_DATA.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>
                </ResponsiveContainer>
                <div className="absolute inset-0 flex items-center justify-center flex-col pointer-events-none">
                  <span className="text-2xl font-bold text-gray-900">1000</span>
                  <span className="text-xs text-gray-500">Total</span>
                </div>
              </div>
              <div className="mt-4 space-y-2">
                {CATEGORY_DATA.map((item) => (
                  <div key={item.name} className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
                      <span className="text-gray-600">{item.name}</span>
                    </div>
                    <span className="font-medium text-gray-900">{item.value}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Active Timers Widget */}
          <Card className="shadow-sm border-gray-200 bg-gray-900 text-white">
            <CardHeader>
              <CardTitle className="text-base font-bold flex items-center gap-2 text-white">
                <Clock className="w-5 h-5 text-blue-400" />
                Active Timers
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {ACTIVE_TIMERS.map((timer, idx) => (
                  <div key={idx} className="flex items-center justify-between border-b border-gray-800 last:border-0 pb-3 last:pb-0">
                    <span className="text-sm font-medium text-gray-300">{timer.title}</span>
                    <div className="flex items-center gap-2">
                      <span className={`font-mono font-bold ${timer.status === 'expired' ? 'text-red-500 animate-pulse' : 'text-white'}`}>
                        {timer.time}
                      </span>
                      {timer.status === 'running' && <div className="w-2 h-2 rounded-full bg-green-500" />}
                      {timer.status === 'warning' && <div className="w-2 h-2 rounded-full bg-yellow-500" />}
                      {timer.status === 'expired' && <div className="w-2 h-2 rounded-full bg-red-500" />}
                    </div>
                  </div>
                ))}
              </div>
              <Button className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white">
                Manage Alerts
              </Button>
            </CardContent>
          </Card>

        </div>
      </div>
    </div>
  );
}

// --- Sub Components ---

function KPICard({ title, value, trend, trendUp, icon: Icon, color, bgColor }: any) {
  return (
    <Card className="border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <CardContent className="p-6">
        <div className="flex justify-between items-start">
          <div>
            <p className="text-sm font-medium text-gray-500 mb-1">{title}</p>
            <h3 className="text-2xl font-bold text-gray-900">{value}</h3>
          </div>
          <div className={`p-2 rounded-lg ${bgColor}`}>
            <Icon className={`w-5 h-5 ${color}`} />
          </div>
        </div>
        <div className="mt-4 flex items-center text-sm">
          {trendUp ? (
            <ArrowUpRight className="w-4 h-4 text-green-500 mr-1" />
          ) : (
            <ArrowDownRight className="w-4 h-4 text-red-500 mr-1" />
          )}
          <span className={trendUp ? 'text-green-600 font-medium' : 'text-red-600 font-medium'}>
            {trend}
          </span>
          <span className="text-gray-400 ml-1">vs last period</span>
        </div>
      </CardContent>
    </Card>
  );
}