import { 
  FileText, 
  CheckCircle, 
  Clock, 
  UserCheck, 
  XCircle, 
  TrendingUp,
  TrendingDown,
  AlertCircle,
  ClipboardCheck,
  Mail,
  Inbox
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { dashboardStats, recentActivities } from '@/lib/mock-data';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';

interface DashboardProps {
  onNavigate: (view: string, filter?: string) => void;
}

export function Dashboard({ onNavigate }: DashboardProps) {
  const statCards = [
    {
      title: 'Total Applications',
      value: dashboardStats.totalApplications,
      icon: FileText,
      color: 'bg-blue-500',
      trend: { value: 12, isPositive: true },
      filter: 'all'
    },
    {
      title: 'LOA Issued',
      value: dashboardStats.loaIssued,
      icon: CheckCircle,
      color: 'bg-green-500',
      trend: { value: 8, isPositive: true },
      filter: 'Approved'
    },
    {
      title: 'Level 1 Pending',
      value: dashboardStats.level1Pending,
      icon: Clock,
      color: 'bg-amber-500',
      trend: { value: 3, isPositive: false },
      filter: 'Level 1 Pending'
    },
    {
      title: 'Level 2 Pending',
      value: dashboardStats.level2Pending,
      icon: UserCheck,
      color: 'bg-purple-500',
      trend: { value: 5, isPositive: true },
      filter: 'Level 2 Pending'
    },
    {
      title: 'Level 3 Pending',
      value: dashboardStats.level3Pending,
      icon: ClipboardCheck,
      color: 'bg-indigo-500',
      trend: { value: 2, isPositive: false },
      filter: 'Level 3 Pending'
    },
    {
      title: 'EOR In Progress',
      value: dashboardStats.eorInProgress,
      icon: AlertCircle,
      color: 'bg-cyan-500',
      trend: { value: 1, isPositive: true },
      filter: 'EOR In Progress'
    },
    {
      title: 'Disqualified',
      value: dashboardStats.disqualified,
      icon: XCircle,
      color: 'bg-red-500',
      trend: { value: 4, isPositive: false },
      filter: 'Disqualified'
    },
    {
      title: 'Pending Reminders',
      value: dashboardStats.pendingReminders,
      icon: Mail,
      color: 'bg-orange-500',
      trend: { value: 7, isPositive: false },
      filter: 'Questionnaire Pending'
    },
    {
      title: 'Shortlisted Today',
      value: dashboardStats.shortlistedToday,
      icon: CheckCircle,
      color: 'bg-teal-500',
      trend: { value: 5, isPositive: true },
      filter: 'Shortlisted'
    },
    {
      title: 'Pending Shortlisting',
      value: dashboardStats.pendingShortlisting,
      icon: Inbox,
      color: 'bg-yellow-500',
      trend: { value: 2, isPositive: false },
      filter: 'all',
      action: 'opportunity-requests' // Changed from all-applications as per user request to hide that option
    }
  ];

  // Mock chart data for status distribution
  const statusData = [
    { status: 'Pending', count: 45, color: '#f59e0b' },
    { status: 'In Progress', count: 68, color: '#3b82f6' },
    { status: 'Approved', count: 25, color: '#10b981' },
    { status: 'Rejected', count: 12, color: '#ef4444' }
  ];

  const locationData = [
    { location: 'Mumbai', count: 23 },
    { location: 'Delhi', count: 18 },
    { location: 'Bangalore', count: 21 },
    { location: 'Chennai', count: 15 },
    { location: 'Kolkata', count: 12 },
    { location: 'Others', count: 61 }
  ];

  const maxLocationCount = Math.max(...locationData.map(l => l.count));

  return (
    <div className="space-y-6">
      {/* Metric Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {statCards.map((stat) => {
          const Icon = stat.icon;
          const TrendIcon = stat.trend.isPositive ? TrendingUp : TrendingDown;
          
          return (
            <Card 
              key={stat.title}
              className="cursor-pointer hover:shadow-lg transition-shadow"
              onClick={() => onNavigate((stat as any).action || 'applications', stat.filter)}
            >
              <CardHeader className="flex flex-row items-center justify-between pb-2">
                <CardTitle className="text-slate-600">{stat.title}</CardTitle>
                <div className={`${stat.color} p-2 rounded-lg`}>
                  <Icon className="w-5 h-5 text-white" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="flex items-end justify-between">
                  <div>
                    <div className="text-slate-900">{stat.value}</div>
                    <div className={`flex items-center gap-1 mt-1 ${
                      stat.trend.isPositive ? 'text-green-600' : 'text-red-600'
                    }`}>
                      <TrendIcon className="w-3 h-3" />
                      <span>{stat.trend.value}% from last month</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Charts and Activity */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Status Distribution */}
        <Card>
          <CardHeader>
            <CardTitle>Application Status Distribution</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {statusData.map((item) => (
                <div key={item.status} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div 
                        className="w-3 h-3 rounded-full"
                        style={{ backgroundColor: item.color }}
                      ></div>
                      <span className="text-slate-700">{item.status}</span>
                    </div>
                    <span className="text-slate-900">{item.count}</span>
                  </div>
                  <div className="w-full bg-slate-200 rounded-full h-2">
                    <div
                      className="h-2 rounded-full transition-all"
                      style={{
                        width: `${(item.count / 150) * 100}%`,
                        backgroundColor: item.color
                      }}
                    ></div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Applications by Location */}
        <Card>
          <CardHeader>
            <CardTitle>Applications by Location</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {locationData.map((item) => (
                <div key={item.location} className="flex items-center gap-3">
                  <div className="w-24 text-slate-700">{item.location}</div>
                  <div className="flex-1 bg-slate-200 rounded-full h-8 relative overflow-hidden">
                    <div
                      className="bg-amber-600 h-full rounded-full transition-all flex items-center justify-end px-3"
                      style={{ width: `${(item.count / maxLocationCount) * 100}%` }}
                    >
                      <span className="text-white">{item.count}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Recent Activity */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Activity</CardTitle>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-80">
            <div className="space-y-4">
              {recentActivities.map((activity) => (
                <div 
                  key={activity.id}
                  className="flex items-start gap-4 p-3 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors"
                  onClick={() => onNavigate('applications')}
                >
                  <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
                    {activity.action === 'Approved' && <CheckCircle className="w-5 h-5 text-green-600" />}
                    {activity.action === 'Interview Scheduled' && <Clock className="w-5 h-5 text-blue-600" />}
                    {activity.action === 'Document Uploaded' && <FileText className="w-5 h-5 text-purple-600" />}
                    {activity.action === 'Reminder Sent' && <Mail className="w-5 h-5 text-orange-600" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <Badge variant="outline">{activity.applicationId}</Badge>
                      <span className="text-slate-700">{activity.action}</span>
                    </div>
                    <p className="text-slate-500 mt-1">by {activity.user}</p>
                  </div>
                  <div className="text-slate-500 flex-shrink-0">{activity.timestamp}</div>
                </div>
              ))}
            </div>
          </ScrollArea>
        </CardContent>
      </Card>
    </div>
  );
}
