import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { MapPin, Wrench, CheckCircle, AlertTriangle, FileText, Camera } from "lucide-react";
import { motion } from "framer-motion";

const Dashboard = () => {
  const missions = [
    { id: 1, status: "urgent", client: "Jean Dupont", location: "Paris, France", type: "Dépannage", equipment: "Climatiseur Daikin RXZ50" },
    { id: 2, status: "en cours", client: "Société CoolAir", location: "Lyon, France", type: "Maintenance", equipment: "Chambre froide LG - 10m³" },
    { id: 3, status: "terminée", client: "Hôtel Riviera", location: "Nice, France", type: "Installation", equipment: "Pompe à chaleur Mitsubishi Zubadan" },
  ];

  const statusIcons = {
    urgent: <AlertTriangle className="text-red-500" size={20} />,
    "en cours": <Wrench className="text-yellow-500" size={20} />,
    terminée: <CheckCircle className="text-green-500" size={20} />,
  };

  return (
    <div className="p-6 bg-gray-900 text-white min-h-screen">
      <h1 className="text-3xl font-bold mb-6">Tableau de Bord</h1>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        {missions.map((mission) => (
          <motion.div key={mission.id} whileHover={{ scale: 1.05 }}>
            <Card className="bg-gray-800 p-4 rounded-2xl shadow-lg">
              <CardContent className="flex flex-col gap-2">
                <div className="flex items-center justify-between">
                  <div>
                    <h2 className="text-xl font-semibold">{mission.client}</h2>
                    <p className="text-sm text-gray-400 flex items-center gap-2">
                      <MapPin size={16} /> {mission.location}
                    </p>
                  </div>
                  {statusIcons[mission.status]}
                </div>
                <p className="text-sm text-gray-300">{mission.type} - {mission.equipment}</p>
                <div className="flex gap-2 mt-2">
                  <Button className="w-full bg-blue-500 hover:bg-blue-600 flex items-center gap-2">
                    <FileText size={16} /> Voir Détails
                  </Button>
                  <Button className="w-full bg-green-500 hover:bg-green-600 flex items-center gap-2">
                    <Camera size={16} /> Ajouter Rapport
                  </Button>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  );
};

export default Dashboard;