import { Header } from "@/components/layout/Header";
import { Footer } from "@/components/layout/Footer";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { PageLoader } from "@/components/ui/loading-spinner";
import useAuth from "@/hooks/useAuth";
import useDashboardStats from "@/hooks/useDashboardStats";
import { useNavigate, Link } from "react-router-dom";
import { useEffect } from "react";
import { 
  CalendarIcon, 
  MessageSquareIcon, 
  BriefcaseIcon, 
  ChevronRightIcon,
  UserCircleIcon,
  UsersIcon,
} from "lucide-react";
import ArtisanStats from "@/components/dashboard/ArtisanStats";

const DashboardStats = () => {
  const { isArtisan } = useAuth();
  
  if (!isArtisan) return null;
  
  return <ArtisanStats />;
};

const Dashboard = () => {
  const { currentUser, userData, isLoading, isClient, isArtisan } = useAuth();
  const navigate = useNavigate();
  const { activeProjects, artisansContacted, messagesNonLus, totalClients, acceptanceRate } = useDashboardStats();

  useEffect(() => {
    if (!isLoading && !currentUser) {
      navigate("/auth?mode=login");
    }
  }, [currentUser, isLoading, navigate]);

  if (isLoading) {
    return <PageLoader />;
  }

  if (!currentUser || !userData) {
    return null;
  }

  const statCards = isClient
    ? [
        { label: "Projets en cours", value: activeProjects.toString(), icon: <BriefcaseIcon className="h-6 w-6 text-gray-600" /> },
        { label: "Artisans contactés", value: artisansContacted.toString(), icon: <UsersIcon className="h-6 w-6 text-gray-600" /> },
        { label: "Messages non lus", value: messagesNonLus.toString(), icon: <MessageSquareIcon className="h-6 w-6 text-gray-600" /> },
      ]
    : [
        { label: "Projets en cours", value: activeProjects.toString(), icon: <BriefcaseIcon className="h-6 w-6 text-gray-600" /> },
        { label: "Clients actifs", value: totalClients.toString(), icon: <UsersIcon className="h-6 w-6 text-gray-600" /> },
        { label: "Taux d'acceptation", value: `${acceptanceRate}%`, icon: <UsersIcon className="h-6 w-6 text-gray-600" /> },
      ];

  const dashboardItems = isClient
    ? [
        {
          icon: <BriefcaseIcon className="h-5 w-5" />,
          color: "bg-blue-100 text-blue-600",
          title: "Mes projets",
          description: "Gérez tous vos projets en cours et passés",
          link: "/projects",
        },
        {
          icon: <MessageSquareIcon className="h-5 w-5" />,
          color: "bg-green-100 text-green-600",
          title: "Messages",
          description: "Consultez vos conversations avec les artisans",
          link: "/messages",
        },
        {
          icon: <CalendarIcon className="h-5 w-5" />,
          color: "bg-purple-100 text-purple-600",
          title: "Rendez-vous",
          description: "Gérez votre calendrier de rendez-vous",
          link: "/appointments",
        },
        {
          icon: <UsersIcon className="h-5 w-5" />,
          color: "bg-amber-100 text-amber-600",
          title: "Mes artisans",
          description: "Liste de vos artisans favoris",
          link: "/my-artisans",
        },
      ]
    : [
        {
          icon: <BriefcaseIcon className="h-5 w-5" />,
          color: "bg-blue-100 text-blue-600",
          title: "Mes chantiers",
          description: "Gérez vos projets en cours et propositions",
          link: "/projects",
        },
        {
          icon: <MessageSquareIcon className="h-5 w-5" />,
          color: "bg-green-100 text-green-600",
          title: "Messages",
          description: "Consultez vos conversations avec les clients",
          link: "/messages",
        },
        {
          icon: <CalendarIcon className="h-5 w-5" />,
          color: "bg-purple-100 text-purple-600",
          title: "Planning",
          description: "Gérez votre calendrier et disponibilités",
          link: "/planning",
        },
      ];

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow bg-gray-50 py-16">
        <div className="container px-4 sm:px-6 lg:px-8 mx-auto">
          <div className="mb-8">
            <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
              Bienvenue, {userData.displayName}
            </h1>
            <p className="text-gray-600">
              {isClient
                ? "Gérez vos projets et trouvez les meilleurs artisans"
                : "Gérez vos chantiers et développez votre activité"}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            {statCards.map((stat, index) => (
              <Card key={index} className="bg-white border-0 shadow-sm">
                <CardContent className="pt-6">
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="text-sm font-medium text-gray-500">
                        {stat.label}
                      </p>
                      <h3 className="text-2xl font-bold text-gray-900 mt-1">
                        {stat.value}
                      </h3>
                    </div>
                    <div className="h-12 w-12 bg-gray-100 rounded-full flex items-center justify-center">
                      {stat.icon}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {dashboardItems.map((item, index) => (
              <Card
                key={index}
                className="bg-white border-0 shadow-sm hover:shadow-md transition-shadow"
              >
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <div
                      className={`${item.color} h-10 w-10 rounded-full flex items-center justify-center`}
                    >
                      {item.icon}
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="pt-0">
                  <h3 className="font-medium text-lg mb-1">{item.title}</h3>
                  <p className="text-gray-500 text-sm">{item.description}</p>
                </CardContent>
                <CardFooter className="pt-0">
                  <Link to={item.link} className="w-full">
                    <Button
                      variant="ghost"
                      className="w-full justify-between text-yesmaestro-primary hover:text-yesmaestro-primary/90 hover:bg-yesmaestro-primary/5"
                    >
                      Accéder
                      <ChevronRightIcon className="h-4 w-4 ml-2" />
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            ))}
          </div>

          {!isClient && <DashboardStats />}

          <Card className="mt-8 bg-gradient-to-r from-yesmaestro-primary to-yesmaestro-accent text-white shadow-lg">
            <CardContent className="p-6">
              <div className="flex flex-col md:flex-row items-center justify-between">
                <div className="flex items-center mb-4 md:mb-0">
                  <div className="bg-white/20 rounded-full p-3 mr-4">
                    <UserCircleIcon className="h-8 w-8" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg">
                      Complétez votre profil !
                    </h3>
                    <p className="text-white/80 text-sm">
                      {isClient
                        ? "Ajoutez vos préférences et détails pour trouver les artisans idéaux"
                        : "Ajoutez vos compétences et réalisations pour attirer plus de clients"}
                    </p>
                  </div>
                </div>
                <Link to="/profile">
                  <Button className="bg-white text-yesmaestro-primary hover:bg-white/90">
                    Compléter mon profil
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>

          {!isClient && (
            <Card className="mt-8 bg-white border-0 shadow-sm">
              <CardHeader>
                <CardTitle>Portfolio</CardTitle>
                <CardDescription>
                  Présentez vos réalisations pour attirer de nouveaux clients
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex justify-between items-center">
                  <p className="text-sm text-gray-600">
                    Un portfolio bien rempli augmente de 70% vos chances d'être contacté par un client.
                  </p>
                  <Link to="/portfolio">
                    <Button variant="outline">
                      Gérer mon portfolio
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default Dashboard;