'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import {
  Users,
  Clock,
  CalendarDays,
  Network,
  UserPlus,
  TrendingUp,
  TrendingDown,
  Minus,
  Building2,
} from 'lucide-react';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { PageTransition } from '@/components/layout/page-transition';
import { Skeleton } from '@/components/ui/skeleton';
import { useEmployeeStats } from '@/hooks/hr/use-employees';
import { cn } from '@/lib/utils';

interface HROverviewContentProps {
  locale: string;
}

/**
 * HR module configuration
 */
const hrModules = [
  {
    id: 'employees',
    icon: Users,
    href: '/hr/employees',
    color: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
  },
  {
    id: 'timeTracking',
    icon: Clock,
    href: '/hr/time-tracking',
    color: 'text-green-500',
    bgColor: 'bg-green-500/10',
  },
  {
    id: 'absences',
    icon: CalendarDays,
    href: '/hr/absences',
    color: 'text-orange-500',
    bgColor: 'bg-orange-500/10',
  },
  {
    id: 'orgChart',
    icon: Network,
    href: '/hr/org-chart',
    color: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
  },
];

/**
 * HR Overview page content
 * Shows HR modules and statistics
 */
export function HROverviewContent({ locale }: HROverviewContentProps) {
  const t = useTranslations('hr');
  const tNav = useTranslations('navigation');

  const { data: stats, isLoading: statsLoading } = useEmployeeStats();

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
            <p className="text-muted-foreground">{t('description')}</p>
          </div>
          <Link href={`/${locale}/hr/employees/new`}>
            <Button className="gap-2">
              <UserPlus className="h-4 w-4" />
              {t('newEmployee')}
            </Button>
          </Link>
        </div>

        {/* Quick Stats */}
        <div className="grid gap-4 md:grid-cols-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.totalEmployees')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {statsLoading ? (
                <Skeleton className="h-8 w-16" />
              ) : (
                <>
                  <div className="text-2xl font-bold">{stats?.total || 0}</div>
                  <div className="flex items-center text-xs text-green-600">
                    <TrendingUp className="h-3 w-3 mr-1" />
                    +{stats?.newThisMonth || 0} {t('stats.thisMonth')}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.activeEmployees')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {statsLoading ? (
                <Skeleton className="h-8 w-16" />
              ) : (
                <>
                  <div className="text-2xl font-bold">{stats?.active || 0}</div>
                  <div className="text-xs text-muted-foreground">
                    {stats?.total
                      ? Math.round((stats.active / stats.total) * 100)
                      : 0}
                    % {t('stats.ofTotal')}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.onLeave')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {statsLoading ? (
                <Skeleton className="h-8 w-16" />
              ) : (
                <>
                  <div className="text-2xl font-bold">{stats?.onLeave || 0}</div>
                  <div className="text-xs text-muted-foreground">
                    {t('stats.currentlyAbsent')}
                  </div>
                </>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.departments')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              {statsLoading ? (
                <Skeleton className="h-8 w-16" />
              ) : (
                <>
                  <div className="text-2xl font-bold">
                    {stats?.departmentBreakdown?.length || 0}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {t('stats.activeDepartments')}
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        </div>

        {/* HR Modules */}
        <div>
          <h2 className="text-xl font-semibold mb-4">{t('modules')}</h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {hrModules.map((module) => {
              const Icon = module.icon;
              return (
                <Link key={module.id} href={`/${locale}${module.href}`}>
                  <Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
                    <CardHeader>
                      <div
                        className={cn(
                          'w-12 h-12 rounded-lg flex items-center justify-center mb-4',
                          module.bgColor
                        )}
                      >
                        <Icon className={cn('h-6 w-6', module.color)} />
                      </div>
                      <CardTitle className="text-lg">
                        {tNav(module.id)}
                      </CardTitle>
                      <CardDescription>
                        {t(`modules.${module.id}.description`)}
                      </CardDescription>
                    </CardHeader>
                  </Card>
                </Link>
              );
            })}
          </div>
        </div>

        {/* Department Breakdown */}
        <Card>
          <CardHeader>
            <CardTitle>{t('departmentBreakdown')}</CardTitle>
            <CardDescription>{t('departmentBreakdownDesc')}</CardDescription>
          </CardHeader>
          <CardContent>
            {statsLoading ? (
              <div className="space-y-3">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="flex items-center justify-between">
                    <Skeleton className="h-5 w-32" />
                    <Skeleton className="h-5 w-12" />
                  </div>
                ))}
              </div>
            ) : stats?.departmentBreakdown?.length ? (
              <div className="space-y-3">
                {stats.departmentBreakdown.map((dept) => (
                  <div
                    key={dept.departmentId}
                    className="flex items-center justify-between"
                  >
                    <div className="flex items-center gap-2">
                      <Building2 className="h-4 w-4 text-muted-foreground" />
                      <span className="font-medium">{dept.departmentName}</span>
                    </div>
                    <Badge variant="secondary">{dept.count}</Badge>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-muted-foreground text-center py-4">
                {t('noDepartments')}
              </p>
            )}
          </CardContent>
        </Card>
      </div>
    </PageTransition>
  );
}
