'use client';

import { useTranslations } from 'next-intl';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { PageTransition } from '@/components/layout/page-transition';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import {
  ClipboardList,
  Users,
  Calendar,
  TrendingUp,
  CheckCircle2,
  Target
} from 'lucide-react';

const leanModules = [
  {
    id: 's3-planning',
    icon: ClipboardList,
    href: '/lean/s3-planning',
    color: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
  },
  {
    id: 'morning-meeting',
    icon: Calendar,
    href: '/lean/morning-meeting',
    color: 'text-green-500',
    bgColor: 'bg-green-500/10',
  },
  {
    id: 'skill-matrix',
    icon: Users,
    href: '/lean/skill-matrix',
    color: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
  },
];

export default function LeanPage() {
  const t = useTranslations('lean');
  const params = useParams();
  const locale = params.locale as string;

  return (
    <PageTransition>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
          <p className="text-muted-foreground">{t('description')}</p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {leanModules.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={`w-12 h-12 rounded-lg ${module.bgColor} flex items-center justify-center mb-4`}>
                      <Icon className={`h-6 w-6 ${module.color}`} />
                    </div>
                    <CardTitle>{t(`modules.${module.id}.title`)}</CardTitle>
                    <CardDescription>{t(`modules.${module.id}.description`)}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Target className="h-4 w-4" />
                      <span>{t(`modules.${module.id}.status`)}</span>
                    </div>
                  </CardContent>
                </Card>
              </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.s3Completion')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">78%</div>
              <div className="flex items-center text-xs text-green-600">
                <TrendingUp className="h-3 w-3 mr-1" />
                +5% vs. last month
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.meetingsThisWeek')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">12</div>
              <div className="text-xs text-muted-foreground">5 departments</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.openActions')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">23</div>
              <div className="text-xs text-yellow-600">8 overdue</div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {t('stats.skillCoverage')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">85%</div>
              <div className="flex items-center text-xs text-green-600">
                <CheckCircle2 className="h-3 w-3 mr-1" />
                Target: 80%
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </PageTransition>
  );
}
