// app/admin/dashboard/page.tsx

'use client';

import {
  Heart,
  Users,
  Briefcase,
  DollarSign,
  TrendingUp,
  TrendingDown,
  CheckCircle,
  Clock,
  XCircle,
  Eye,
} from 'lucide-react';
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

// Stats cards data
const statsCards = [
  {
    title: 'Total Users',
    value: '2,847',
    change: '+12.5%',
    trend: 'up',
    icon: Users,
    color: 'emerald',
  },
  {
    title: 'Active Jobs',
    value: '342',
    change: '+8.2%',
    trend: 'up',
    icon: Briefcase,
    color: 'blue',
  },
  {
    title: 'Total Revenue',
    value: '$48,293',
    change: '+23.1%',
    trend: 'up',
    icon: DollarSign,
    color: 'amber',
  },
  {
    title: 'Completion Rate',
    value: '94.2%',
    change: '-2.1%',
    trend: 'down',
    icon: CheckCircle,
    color: 'purple',
  },
];

// Weekly data for line chart
const weeklyData = [
  { name: 'Mon', users: 45, jobs: 28, revenue: 3200 },
  { name: 'Tue', users: 52, jobs: 32, revenue: 4100 },
  { name: 'Wed', users: 48, jobs: 35, revenue: 3800 },
  { name: 'Thu', users: 61, jobs: 42, revenue: 5200 },
  { name: 'Fri', users: 58, jobs: 38, revenue: 4900 },
  { name: 'Sat', users: 42, jobs: 25, revenue: 3100 },
  { name: 'Sun', users: 38, jobs: 22, revenue: 2800 },
];

// Job status data for pie chart
const jobStatusData = [
  { name: 'Open', value: 156, color: '#10B981' },
  { name: 'In Progress', value: 98, color: '#F59E0B' },
  { name: 'Completed', value: 287, color: '#3B82F6' },
  { name: 'Cancelled', value: 34, color: '#EF4444' },
];

// Recent activity data
const recentActivities = [
  {
    id: 1,
    type: 'user',
    action: 'New care seeker registered',
    user: 'Sarah Johnson',
    time: '2 minutes ago',
    status: 'success',
  },
  {
    id: 2,
    type: 'job',
    action: 'New job posted',
    user: 'Michael Brown',
    time: '15 minutes ago',
    status: 'success',
  },
  {
    id: 3,
    type: 'payment',
    action: 'Commission earned',
    user: 'Maria Rodriguez',
    time: '1 hour ago',
    status: 'pending',
  },
  {
    id: 4,
    type: 'provider',
    action: 'New provider registered',
    user: 'James Wilson',
    time: '3 hours ago',
    status: 'success',
  },
  {
    id: 5,
    type: 'job',
    action: 'Job completed',
    user: 'Emily Davis',
    time: '5 hours ago',
    status: 'completed',
  },
];

// Top providers data
const topProviders = [
  { name: 'Maria Rodriguez', jobs: 24, rating: 4.9, earnings: 2450 },
  { name: 'James Wilson', jobs: 18, rating: 4.7, earnings: 1890 },
  { name: 'Sarah Chen', jobs: 15, rating: 5.0, earnings: 1720 },
  { name: 'Michael Brown', jobs: 12, rating: 4.5, earnings: 1380 },
];

const getStatusColor = (status: string) => {
  switch (status) {
    case 'success':
      return 'bg-emerald-100 text-emerald-600';
    case 'pending':
      return 'bg-amber-100 text-amber-600';
    case 'completed':
      return 'bg-blue-100 text-blue-600';
    default:
      return 'bg-gray-100 text-gray-600';
  }
};

const getStatusText = (status: string) => {
  switch (status) {
    case 'success':
      return 'Success';
    case 'pending':
      return 'Pending';
    case 'completed':
      return 'Completed';
    default:
      return status;
  }
};

export default function AdminDashboard() {
  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <p className="text-gray-500 mt-1">Welcome back! Here's what's happening today.</p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        {statsCards.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <div
              key={index}
              className="bg-white rounded-xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
            >
              <div className="flex items-center justify-between">
                <div
                  className={`w-12 h-12 rounded-xl flex items-center justify-center bg-${stat.color}-100`}
                >
                  <Icon className={`w-6 h-6 text-${stat.color}-600`} />
                </div>
                <div
                  className={`flex items-center gap-1 text-sm font-medium ${
                    stat.trend === 'up' ? 'text-emerald-600' : 'text-red-600'
                  }`}
                >
                  {stat.trend === 'up' ? (
                    <TrendingUp className="w-4 h-4" />
                  ) : (
                    <TrendingDown className="w-4 h-4" />
                  )}
                  {stat.change}
                </div>
              </div>
              <div className="mt-4">
                <h3 className="text-2xl font-bold text-gray-900">{stat.value}</h3>
                <p className="text-sm text-gray-500 mt-1">{stat.title}</p>
              </div>
            </div>
          );
        })}
      </div>

      {/* Charts Row */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Line Chart */}
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-gray-900">Weekly Activity</h2>
            <select className="text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none">
              <option>This Week</option>
              <option>Last Week</option>
              <option>This Month</option>
            </select>
          </div>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={weeklyData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
              <XAxis dataKey="name" stroke="#9CA3AF" />
              <YAxis stroke="#9CA3AF" />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="users"
                stroke="#10B981"
                strokeWidth={2}
                dot={{ fill: '#10B981' }}
                name="New Users"
              />
              <Line
                type="monotone"
                dataKey="jobs"
                stroke="#F59E0B"
                strokeWidth={2}
                dot={{ fill: '#F59E0B' }}
                name="Jobs Posted"
              />
              <Line
                type="monotone"
                dataKey="revenue"
                stroke="#3B82F6"
                strokeWidth={2}
                dot={{ fill: '#3B82F6' }}
                name="Revenue ($)"
              />
            </LineChart>
          </ResponsiveContainer>
        </div>

        {/* Pie Chart */}
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Job Status Distribution</h2>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={jobStatusData}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={100}
                paddingAngle={5}
                dataKey="value"
                label={({ name, percent }) => `${name} ${(percent! * 100).toFixed(0)}%`}
                labelLine={false}
              >
                {jobStatusData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
          <div className="flex justify-center gap-4 mt-4">
            {jobStatusData.map((item) => (
              <div key={item.name} className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
                <span className="text-sm text-gray-600">{item.name}</span>
                <span className="text-sm font-semibold text-gray-900">{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Bottom Row */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Activity */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100">
          <div className="p-5 border-b border-gray-100">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-gray-900">Recent Activity</h2>
              <button className="text-sm text-emerald-600 hover:text-emerald-700 font-medium">
                View All
              </button>
            </div>
          </div>
          <div className="divide-y divide-gray-100">
            {recentActivities.map((activity) => (
              <div key={activity.id} className="p-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-start gap-3">
                  <div
                    className={`w-8 h-8 rounded-lg flex items-center justify-center ${getStatusColor(
                      activity.status
                    )}`}
                  >
                    {activity.type === 'user' && <Users className="w-4 h-4" />}
                    {activity.type === 'job' && <Briefcase className="w-4 h-4" />}
                    {activity.type === 'payment' && <DollarSign className="w-4 h-4" />}
                    {activity.type === 'provider' && <Heart className="w-4 h-4" />}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm text-gray-900">
                      <span className="font-semibold">{activity.user}</span> {activity.action}
                    </p>
                    <div className="flex items-center gap-2 mt-1">
                      <span
                        className={`text-xs px-2 py-0.5 rounded-full ${getStatusColor(activity.status)}`}
                      >
                        {getStatusText(activity.status)}
                      </span>
                      <span className="text-xs text-gray-400">{activity.time}</span>
                    </div>
                  </div>
                  <button className="text-gray-400 hover:text-gray-600">
                    <Eye className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Top Providers */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-100">
          <div className="p-5 border-b border-gray-100">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold text-gray-900">Top Providers</h2>
              <button className="text-sm text-emerald-600 hover:text-emerald-700 font-medium">
                View All
              </button>
            </div>
          </div>
          <div className="divide-y divide-gray-100">
            {topProviders.map((provider, index) => (
              <div key={index} className="p-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center text-white font-semibold">
                    {provider.name.charAt(0)}
                  </div>
                  <div className="flex-1">
                    <p className="font-semibold text-gray-900">{provider.name}</p>
                    <div className="flex items-center gap-3 mt-1">
                      <span className="text-xs text-gray-500">{provider.jobs} jobs</span>
                      <div className="flex items-center gap-1">
                        <span className="text-xs text-amber-500">★</span>
                        <span className="text-xs text-gray-600">{provider.rating}</span>
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-emerald-600">${provider.earnings}</p>
                    <p className="text-xs text-gray-400">earned</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      {/* <div className="bg-gradient-to-r from-emerald-50 to-amber-50 rounded-xl p-6">
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Quick Actions</h3>
            <p className="text-sm text-gray-600 mt-1">Manage platform operations efficiently</p>
          </div>
          <div className="flex gap-3">
            <button className="px-4 py-2 bg-white text-emerald-600 rounded-lg font-medium hover:bg-gray-50 transition-colors shadow-sm">
              Export Reports
            </button>
            <button className="px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 transition-colors shadow-sm">
              Send Notification
            </button>
          </div>
        </div>
      </div> */}
    </div>
  );
}