import { useState, useEffect } from "react";
import { Layout } from "@/components/Layout";
import { apiClient } from "@/App";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { 
  Euro,
  Calculator,
  Loader2,
  Users,
  Clock,
  CalendarDays,
  Printer,
  Info
} from "lucide-react";
import { format, parse, startOfMonth, endOfMonth } from "date-fns";
import { fr } from "date-fns/locale";

// Configuration des salaires par agent
const SALARY_CONFIG = {
  // Omar: 12,04€/h + HS 25% + Samedi 50% + 15€ trajet/jour + 7€ panier/jour - 35€ mutuelle
  "OUABDELMOUMEN": {
    type: "complet",
    tauxHoraire: 12.04,
    heuresParSemaine: 35,
    majorationHeuresSup: 25,
    majorationSamedi: 50,
    trajetParJour: 15,
    panierParJour: 7,
    mutuelle: 35,
    description: "12,04€/h + HS 25% + Sam 50% + Trajet + Panier - Mutuelle"
  },
  // Amine: 9.5€/h - 270€, pas de majoration
  "LAJDEL": {
    type: "taux_fixe_deduction",
    tauxHoraire: 9.5,
    deductionFixe: 270,
    description: "9,50€/h - 270€"
  },
  // Abdelillah: 9€/h - 15€/jour, pas de majoration
  "MALLOUK": {
    type: "taux_fixe",
    tauxHoraire: 9,
    deductionParJour: 15,
    description: "9€/h - 15€/jour travaillé"
  }
};

export default function SalairesPage() {
  const [loading, setLoading] = useState(true);
  const [users, setUsers] = useState([]);
  const [monthlyData, setMonthlyData] = useState({});
  const [selectedMonth, setSelectedMonth] = useState(() => {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
  });
  const [smicHoraire, setSmicHoraire] = useState(11.65);

  useEffect(() => {
    fetchData();
  }, [selectedMonth]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const monthStart = startOfMonth(parse(selectedMonth, "yyyy-MM", new Date()));
      const monthEnd = endOfMonth(monthStart);
      
      const [usersRes, pointagesRes] = await Promise.all([
        apiClient.get("/users"),
        apiClient.get(`/pointages?start_date=${format(monthStart, 'yyyy-MM-dd')}&end_date=${format(monthEnd, 'yyyy-MM-dd')}`)
      ]);
      
      const agents = usersRes.data.filter(u => u.role === "agent");
      setUsers(agents);
      
      // Group pointages by user
      const grouped = {};
      agents.forEach(agent => {
        const userPointages = pointagesRes.data.filter(p => p.user_id === agent.id);
        const heuresNormales = userPointages
          .filter(p => !p.is_absent && new Date(p.date).getDay() !== 6)
          .reduce((sum, p) => sum + (p.heures_travaillees || 0), 0);
        const heuresSamedi = userPointages
          .filter(p => !p.is_absent && new Date(p.date).getDay() === 6)
          .reduce((sum, p) => sum + (p.heures_travaillees || 0), 0);
        const joursTravailes = userPointages.filter(p => !p.is_absent).length;
        const absences = userPointages.filter(p => p.is_absent).length;
        
        grouped[agent.id] = {
          heuresNormales,
          heuresSamedi,
          totalHeures: heuresNormales + heuresSamedi,
          joursTravailes,
          absences
        };
      });
      setMonthlyData(grouped);
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setLoading(false);
    }
  };

  const calculateSalary = (user) => {
    const data = monthlyData[user.id] || { heuresNormales: 0, heuresSamedi: 0, joursTravailes: 0, totalHeures: 0, semaines: [] };
    const config = SALARY_CONFIG[user.nom] || SALARY_CONFIG["OUABDELMOUMEN"];
    
    let salaireBrut = 0;
    let details = [];
    
    if (config.type === "complet") {
      // Omar: calcul complet avec HS par semaine
      const tauxBase = config.tauxHoraire;
      
      // Calcul heures normales vs supplémentaires
      // Pour simplifier: on considère 35h/semaine = 151.67h/mois
      const heuresNormalesMensuel = 151.67;
      const heuresNormales = Math.min(data.heuresNormales, heuresNormalesMensuel);
      const heuresSup = Math.max(0, data.heuresNormales - heuresNormalesMensuel);
      
      // Heures normales
      const montantBase = heuresNormales * tauxBase;
      details.push({ label: `Heures normales (${heuresNormales.toFixed(1)}h × ${tauxBase}€)`, montant: montantBase });
      salaireBrut += montantBase;
      
      // Heures supplémentaires +25%
      if (heuresSup > 0) {
        const tauxSup = tauxBase * 1.25;
        const montantSup = heuresSup * tauxSup;
        details.push({ label: `Heures sup +25% (${heuresSup.toFixed(1)}h × ${tauxSup.toFixed(2)}€)`, montant: montantSup });
        salaireBrut += montantSup;
      }
      
      // Heures samedi +50%
      if (data.heuresSamedi > 0) {
        const tauxSamedi = tauxBase * 1.5;
        const montantSamedi = data.heuresSamedi * tauxSamedi;
        details.push({ label: `Samedi +50% (${data.heuresSamedi.toFixed(1)}h × ${tauxSamedi.toFixed(2)}€)`, montant: montantSamedi, highlight: true });
        salaireBrut += montantSamedi;
      }
      
      // Indemnité trajet +15€/jour
      const montantTrajet = data.joursTravailes * config.trajetParJour;
      details.push({ label: `Trajet (${data.joursTravailes} jours × ${config.trajetParJour}€)`, montant: montantTrajet });
      salaireBrut += montantTrajet;
      
      // Panier +7€/jour
      const montantPanier = data.joursTravailes * config.panierParJour;
      details.push({ label: `Panier (${data.joursTravailes} jours × ${config.panierParJour}€)`, montant: montantPanier });
      salaireBrut += montantPanier;
      
      // Mutuelle -35€
      details.push({ label: `Mutuelle`, montant: -config.mutuelle, negative: true });
      salaireBrut -= config.mutuelle;
      
    } else if (config.type === "taux_fixe_deduction") {
      // Amine: 9,5€/h - 270€
      const montantHeures = data.totalHeures * config.tauxHoraire;
      details.push({ label: `Heures (${data.totalHeures.toFixed(1)}h × ${config.tauxHoraire}€)`, montant: montantHeures });
      salaireBrut += montantHeures;
      
      details.push({ label: `Déduction mensuelle`, montant: -config.deductionFixe, negative: true });
      salaireBrut -= config.deductionFixe;
      
    } else if (config.type === "taux_fixe") {
      // Abdelillah: 9€/h - 15€/jour
      const montantHeures = data.totalHeures * config.tauxHoraire;
      details.push({ label: `Heures (${data.totalHeures.toFixed(1)}h × ${config.tauxHoraire}€)`, montant: montantHeures });
      salaireBrut += montantHeures;
      
      const deductionJours = data.joursTravailes * config.deductionParJour;
      details.push({ label: `Déduction (${data.joursTravailes} jours × ${config.deductionParJour}€)`, montant: -deductionJours, negative: true });
      salaireBrut -= deductionJours;
    }
    
    return { salaireBrut: Math.max(0, salaireBrut), details, config };
  };

  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amount);
  };

  const formatMonthName = (monthStr) => {
    try {
      const date = parse(monthStr, "yyyy-MM", new Date());
      return format(date, "MMMM yyyy", { locale: fr });
    } catch {
      return monthStr;
    }
  };

  // Available months
  const availableMonths = [];
  const now = new Date();
  for (let i = 0; i < 12; i++) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    availableMonths.push(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`);
  }

  const handlePrint = () => window.print();

  if (loading) {
    return (
      <Layout>
        <div className="flex items-center justify-center h-64">
          <Loader2 className="w-8 h-8 animate-spin text-red-600" />
        </div>
      </Layout>
    );
  }

  const totalSalaires = users.reduce((sum, user) => sum + calculateSalary(user).salaireBrut, 0);

  return (
    <Layout>
      <div className="space-y-6 print:space-y-4">
        {/* Header */}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 print:hidden">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Estimation Salaires</h1>
            <p className="text-slate-500">Calcul automatique des salaires mensuels</p>
          </div>
          <div className="flex items-center gap-3">
            <Select value={selectedMonth} onValueChange={setSelectedMonth}>
              <SelectTrigger className="w-48">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {availableMonths.map(m => (
                  <SelectItem key={m} value={m}>{formatMonthName(m)}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button variant="outline" onClick={handlePrint}>
              <Printer className="w-4 h-4 mr-2" />
              Imprimer
            </Button>
          </div>
        </div>

        {/* Print Header */}
        <div className="hidden print:flex items-center justify-between border-b-2 border-slate-900 pb-4">
          <img src="/logo-maintech.png" alt="MainTech-pro" className="h-16" />
          <div className="text-right">
            <h1 className="text-xl font-bold">Estimation Salaires</h1>
            <p className="text-sm capitalize">{formatMonthName(selectedMonth)}</p>
          </div>
        </div>

        {/* SMIC Config */}
        <Card className="print:hidden">
          <CardContent className="py-4">
            <div className="flex items-center gap-4">
              <Label className="whitespace-nowrap">SMIC horaire brut :</Label>
              <div className="flex items-center gap-2">
                <Euro className="w-4 h-4 text-slate-400" />
                <Input
                  type="number"
                  step="0.01"
                  value={smicHoraire}
                  onChange={(e) => setSmicHoraire(parseFloat(e.target.value) || 11.65)}
                  className="w-24"
                />
              </div>
              <span className="text-sm text-slate-500">(SMIC 2024: 11,65€)</span>
            </div>
          </CardContent>
        </Card>

        {/* Summary Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card className="border-l-4 border-l-red-500">
            <CardContent className="pt-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                  <Euro className="w-6 h-6 text-red-600" />
                </div>
                <div>
                  <p className="text-sm text-slate-500">Total Salaires</p>
                  <p className="text-2xl font-bold text-red-600">{formatCurrency(totalSalaires)}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <Users className="w-6 h-6 text-blue-600" />
                </div>
                <div>
                  <p className="text-sm text-slate-500">Agents</p>
                  <p className="text-2xl font-bold text-slate-900">{users.length}</p>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center">
                  <CalendarDays className="w-6 h-6 text-emerald-600" />
                </div>
                <div>
                  <p className="text-sm text-slate-500">Période</p>
                  <p className="text-lg font-bold text-slate-900 capitalize">{formatMonthName(selectedMonth)}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Salary Details per Agent */}
        {users.map(user => {
          const data = monthlyData[user.id] || { heuresNormales: 0, heuresSamedi: 0, totalHeures: 0, joursTravailes: 0 };
          const { salaireBrut, details, config } = calculateSalary(user);
          
          return (
            <Card key={user.id} className="overflow-hidden">
              <CardHeader className="bg-slate-50 border-b">
                <div className="flex items-center justify-between">
                  <CardTitle className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                      <span className="font-bold text-red-600">{user.prenom[0]}{user.nom[0]}</span>
                    </div>
                    <div>
                      <p className="text-lg">{user.prenom} {user.nom}</p>
                      <p className="text-sm font-normal text-slate-500">{config.description}</p>
                    </div>
                  </CardTitle>
                  <div className="text-right">
                    <p className="text-2xl font-bold text-red-600">{formatCurrency(salaireBrut)}</p>
                    <p className="text-sm text-slate-500">Brut estimé</p>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Hours Summary */}
                  <div className="space-y-3">
                    <h4 className="font-semibold text-slate-700 flex items-center gap-2">
                      <Clock className="w-4 h-4" />
                      Heures du mois
                    </h4>
                    <div className="grid grid-cols-2 gap-3">
                      <div className="bg-blue-50 rounded-lg p-3 text-center">
                        <p className="text-2xl font-bold text-blue-600">{data.heuresNormales.toFixed(1)}h</p>
                        <p className="text-xs text-slate-600">Heures normales</p>
                      </div>
                      <div className="bg-orange-50 rounded-lg p-3 text-center">
                        <p className="text-2xl font-bold text-orange-600">{data.heuresSamedi.toFixed(1)}h</p>
                        <p className="text-xs text-slate-600">Heures samedi</p>
                      </div>
                      <div className="bg-emerald-50 rounded-lg p-3 text-center">
                        <p className="text-2xl font-bold text-emerald-600">{data.joursTravailes}</p>
                        <p className="text-xs text-slate-600">Jours travaillés</p>
                      </div>
                      <div className="bg-slate-100 rounded-lg p-3 text-center">
                        <p className="text-2xl font-bold text-slate-600">{data.totalHeures.toFixed(1)}h</p>
                        <p className="text-xs text-slate-600">Total heures</p>
                      </div>
                    </div>
                  </div>
                  
                  {/* Salary Breakdown */}
                  <div className="space-y-3">
                    <h4 className="font-semibold text-slate-700 flex items-center gap-2">
                      <Calculator className="w-4 h-4" />
                      Détail calcul
                    </h4>
                    <div className="space-y-2">
                      {details.map((item, idx) => (
                        <div 
                          key={idx} 
                          className={`flex justify-between items-center py-1 px-2 rounded ${
                            item.highlight ? 'bg-orange-50' : item.negative ? 'bg-red-50' : ''
                          }`}
                        >
                          <span className="text-sm text-slate-600">{item.label}</span>
                          <span className={`font-semibold ${item.negative ? 'text-red-600' : 'text-slate-900'}`}>
                            {item.negative ? '-' : ''}{formatCurrency(Math.abs(item.montant))}
                          </span>
                        </div>
                      ))}
                      <div className="flex justify-between items-center py-2 px-2 bg-red-100 rounded-lg mt-2">
                        <span className="font-bold text-red-700">TOTAL BRUT</span>
                        <span className="font-bold text-red-700 text-lg">{formatCurrency(salaireBrut)}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}

        {/* Config Info */}
        <Card className="bg-amber-50 border-amber-200 print:hidden">
          <CardContent className="py-4">
            <div className="flex items-start gap-3">
              <Info className="w-5 h-5 text-amber-600 mt-0.5" />
              <div className="text-sm text-amber-800">
                <p className="font-semibold mb-2">Configuration des salaires :</p>
                <ul className="space-y-1 list-disc list-inside">
                  <li><strong>Omar:</strong> 12,04€/h + HS 25% (après 35h/sem) + Samedi 50% + 15€ trajet/jour + 7€ panier/jour - 35€ mutuelle</li>
                  <li><strong>Amine:</strong> 9,50€/h - 270€/mois</li>
                  <li><strong>Abdelillah:</strong> 9€/h - 15€/jour travaillé</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Print Footer */}
        <div className="hidden print:block mt-8 pt-4 border-t border-slate-300">
          <p className="text-sm text-slate-500 text-center">
            Document généré le {format(new Date(), "dd/MM/yyyy 'à' HH:mm", { locale: fr })} - Estimation indicative
          </p>
        </div>
      </div>
    </Layout>
  );
}