
import React from 'react';
import { Helmet } from 'react-helmet';
import { motion } from 'framer-motion';
import { mockOpportunities } from '@/data/mockData';
import { Euro } from 'lucide-react';

const PipelinePage = () => {
  const stages = ['new', 'qualification', 'proposal', 'negotiation', 'won', 'lost'];
  const stageLabels = {
    new: 'Nouveau',
    qualification: 'Qualification',
    proposal: 'Proposition',
    negotiation: 'Négociation',
    won: 'Gagné',
    lost: 'Perdu'
  };

  const getOpportunitiesByStage = (stage) => {
    return mockOpportunities.filter(opp => opp.stage === stage);
  };

  return (
    <>
      <Helmet>
        <title>Pipeline - Bijou ERP</title>
        <meta name="description" content="Pipeline des opportunités" />
      </Helmet>

      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pipeline des ventes</h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Vue Kanban de vos opportunités</p>
        </div>

        <div className="flex gap-4 overflow-x-auto pb-4">
          {stages.map((stage) => {
            const opportunities = getOpportunitiesByStage(stage);
            const totalValue = opportunities.reduce((sum, opp) => sum + opp.value, 0);

            return (
              <div key={stage} className="flex-shrink-0 w-80">
                <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-4">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="font-semibold text-gray-900 dark:text-white">{stageLabels[stage]}</h3>
                    <span className="text-xs font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-900 px-2 py-1 rounded-lg">
                      {opportunities.length}
                    </span>
                  </div>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{totalValue.toLocaleString()}€</p>

                  <div className="space-y-3">
                    {opportunities.map((opp) => (
                      <motion.div
                        key={opp.id}
                        whileHover={{ scale: 1.02 }}
                        className="p-4 bg-gray-50 dark:bg-gray-900 rounded-xl cursor-pointer hover:shadow-md transition-all"
                      >
                        <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-1">{opp.name}</h4>
                        <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">{opp.client}</p>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-1 text-[#941403]">
                            <Euro className="w-4 h-4" />
                            <span className="text-sm font-semibold">{opp.value.toLocaleString()}€</span>
                          </div>
                          <span className="text-xs text-gray-600 dark:text-gray-400">{opp.probability}%</span>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default PipelinePage;
