
import React, { useMemo, useState } from 'react';
import { Helmet } from 'react-helmet';
import { CheckCircle, Clock, Phone, Mail } from 'lucide-react';
import KPIBar from '@/components/KPIBar';
import { mockTimeline, calculateKPIs } from '@/data/mockData'; // Reusing timeline as activities

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

  const kpis = useMemo(() => {
    // Fake amount field to satisfy calculator
    const activitiesWithAmt = mockTimeline.map(t => ({ ...t, amount: 1 }));
    const stats = calculateKPIs(activitiesWithAmt, period, { dateField: 'date', amountField: 'amount' });
    const calls = stats.items.filter(a => a.type === 'call');
    const emails = stats.items.filter(a => a.type === 'email');

    return [
      { title: 'Activités Créées', value: stats.filteredCount, change: '+15', trend: 'up', icon: Clock },
      { title: 'Complétées', value: Math.round(stats.filteredCount * 0.8), change: '+12', trend: 'up', icon: CheckCircle },
      { title: 'Appels', value: calls.length, change: '', trend: 'neutral', icon: Phone },
      { title: 'Emails', value: emails.length, change: '', trend: 'neutral', icon: Mail },
    ];
  }, [period]);

  return (
    <>
      <Helmet>
        <title>Activités - Bijou ERP</title>
        <meta name="description" content="Journal des activités" />
      </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">Activités</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 Activités - Contenu à venir</p>
        </div>
      </div>
    </>
  );
};

export default ActivitiesPage;
