
import React, { useMemo, useState } from 'react';
import { Helmet } from 'react-helmet';
import { CheckSquare, AlertCircle, Flag } from 'lucide-react';
import KPIBar from '@/components/KPIBar';
// Using mockTimeline as proxy again for now
import { mockTimeline, calculateKPIs } from '@/data/mockData';

const TasksPage = () => {
  const [period, setPeriod] = useState('month');

  const kpis = useMemo(() => {
    const stats = calculateKPIs(mockTimeline, period, { dateField: 'date', amountField: 'id' });

    return [
      { title: 'Tâches Créées', value: stats.filteredCount, change: '+10', trend: 'up', icon: CheckSquare },
      { title: 'Complétées', value: Math.round(stats.filteredCount * 0.6), change: '+5', trend: 'up', icon: CheckSquare },
      { title: 'En Retard', value: 3, change: '-1', trend: 'down', icon: AlertCircle },
      { title: 'Haute Priorité', value: 5, change: '', trend: 'neutral', icon: Flag },
    ];
  }, [period]);

  return (
    <>
      <Helmet>
        <title>Tâches - Bijou ERP</title>
        <meta name="description" content="Gestion des tâches" />
      </Helmet>
      <div className="space-y-6">
        <KPIBar kpis={kpis} period={period} onPeriodChange={setPeriod} />

        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Tâches</h1>
        </div>
        <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-12 text-center">
          <p className="text-gray-600 dark:text-gray-400">Page Tâches - Contenu à venir</p>
        </div>
      </div>
    </>
  );
};

export default TasksPage;
