import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { FaFolderOpen, FaChartPie, FaArrowRight, FaTasks, FaClock } from 'react-icons/fa';

const ProjectModulePage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const tiles = [
    {
      title: t('projects.allProjects', 'All projects'),
      subtitle: t('projects.allProjectsSub', 'Browse, export, duplicate'),
      icon: <FaFolderOpen className="text-white text-lg" />,
      color: 'bg-blue-600',
      onClick: () => navigate('/projects/list'),
    },
    {
      title: t('projects.overviewReport', 'Project overview'),
      subtitle: t('projects.overviewReportSub', 'Budget, tasks, issues & weekly status'),
      icon: <FaChartPie className="text-white text-lg" />,
      color: 'bg-teal-600',
      onClick: () => navigate('/projects/overview'),
    },
    {
      title: t('projects.tasks', 'Tasks'),
      subtitle: t('projects.tasksSub', 'Task list (all projects)'),
      icon: <FaTasks className="text-white text-lg" />,
      color: 'bg-indigo-600',
      onClick: () => navigate('/projects/tasks'),
    },
    {
      title: t('projects.timesheets', 'Timesheets'),
      subtitle: t('projects.timesheetsSub', 'Time entries (all projects)'),
      icon: <FaClock className="text-white text-lg" />,
      color: 'bg-amber-600',
      onClick: () => navigate('/projects/timesheets'),
    },
  ];

  return (
    <div className="p-6 max-w-5xl mx-auto">
      <div className="flex items-center gap-4 mb-8">
        <div className="w-14 h-14 rounded-2xl bg-blue-600 flex items-center justify-center shadow-lg">
          <FaFolderOpen className="text-white text-2xl" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t('projects.moduleTitle', 'Project management')}
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            {t('projects.moduleSubtitle', 'Projects, overview dashboard, tasks & timesheets')}
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {tiles.map(tile => (
          <button
            key={tile.title}
            type="button"
            onClick={tile.onClick}
            className="flex items-center gap-4 p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-blue-300 dark:hover:border-blue-600 hover:shadow-md transition-all text-left w-full"
          >
            <div className={`w-12 h-12 rounded-xl ${tile.color} flex items-center justify-center shrink-0`}>
              {tile.icon}
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="font-semibold text-gray-900 dark:text-white">{tile.title}</h2>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{tile.subtitle}</p>
            </div>
            <FaArrowRight className="text-gray-400 shrink-0" />
          </button>
        ))}
      </div>
    </div>
  );
};

export default ProjectModulePage;
