'use client'

import { useEffect, useState } from 'react'
import { signOut, useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import {
  BarChart3,
  BrainCircuit,
  Eye,
  LayoutDashboard,
  LogOut,
  Package,
  PanelTop,
  ShoppingCart,
  Truck,
  User,
  UserCog,
  Users,
  Wrench,
} from 'lucide-react'
import POSModule from '@/components/pos/POSModule'
import { ProduitListe } from '@/components/products/ProduitListe'
import { ClientList } from '@/components/clients/client-list'
import AtelierModule from '@/components/atelier/AtelierModule'
import { SupplierList } from '@/components/suppliers/SupplierList'
import PurchaseModule from '@/components/purchases/PurchaseModule'
import ReportsModule from '@/components/reports/ReportsModule'
import { EmployeeManagement } from '@/components/employees/EmployeeManagement'
import { AIAssistant } from '@/components/ai/AIAssistant'
import { ThemeToggle } from '@/components/theme-toggle'
import { SellerWizard } from '@/components/seller-wizard/SellerWizard'

type RoleEmploye = 'VENDEUR' | 'RESPONSABLE' | 'ADMIN'
type Module =
  | 'HOME'
  | 'CLIENTS'
  | 'PRODUITS'
  | 'FOURNISSEURS'
  | 'ACHATS'
  | 'VENTE'
  | 'RAPPORTS'
  | 'ATELIER'
  | 'UTILISATEURS'
  | 'IA'
  | 'VENDEUR_WIZARD'

interface ModuleCard {
  id: Module
  title: string
  description: string
  icon: React.ReactNode
  badge?: string
  color: string
  roles: RoleEmploye[]
}

const modules: ModuleCard[] = [
  {
    id: 'VENDEUR_WIZARD',
    title: 'Vendeur Express',
    description: 'Parcours rapide client, service, recu',
    icon: <PanelTop className="h-8 w-8" />,
    badge: 'Tablette',
    color: 'bg-rose-500',
    roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'CLIENTS',
    title: 'Gestion Clients',
    description: 'Fiches clients, mesures de vision, ordonnances',
    icon: <Users className="h-8 w-8" />,
    color: 'bg-blue-500',
    roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'PRODUITS',
    title: 'Gestion Produits',
    description: 'Catalogue, stock, images, QR codes',
    icon: <Package className="h-8 w-8" />,
    badge: 'Alertes',
    color: 'bg-emerald-500',
    roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'FOURNISSEURS',
    title: 'Fournisseurs',
    description: 'Gestion des fournisseurs et contacts',
    icon: <Truck className="h-8 w-8" />,
    color: 'bg-orange-500',
    roles: ['RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'ACHATS',
    title: 'Achats & Stock',
    description: 'Reception, factures fournisseurs, entrees stock',
    icon: <ShoppingCart className="h-8 w-8" />,
    color: 'bg-purple-500',
    roles: ['RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'VENTE',
    title: 'Point de Vente',
    description: 'Encaissement, facturation, POS',
    icon: <ShoppingCart className="h-8 w-8" />,
    badge: 'Actif',
    color: 'bg-green-500',
    roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'ATELIER',
    title: 'Atelier',
    description: 'Montage de lunettes, commandes en cours',
    icon: <Wrench className="h-8 w-8" />,
    badge: 'En cours',
    color: 'bg-amber-500',
    roles: ['VENDEUR', 'RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'RAPPORTS',
    title: 'Rapports',
    description: 'Statistiques, exports Excel/CSV/PDF',
    icon: <BarChart3 className="h-8 w-8" />,
    color: 'bg-cyan-500',
    roles: ['RESPONSABLE', 'ADMIN'],
  },
  {
    id: 'UTILISATEURS',
    title: 'Utilisateurs',
    description: 'Employes, roles et niveaux d acces',
    icon: <UserCog className="h-8 w-8" />,
    color: 'bg-indigo-500',
    roles: ['ADMIN'],
  },
  {
    id: 'IA',
    title: 'Assistant IA',
    description: 'Conseils, priorites et aide a la decision',
    icon: <BrainCircuit className="h-8 w-8" />,
    badge: 'Nouveau',
    color: 'bg-sky-500',
    roles: ['RESPONSABLE', 'ADMIN'],
  },
]

export default function Home() {
  const { data: session, status } = useSession()
  const router = useRouter()
  const [currentModule, setCurrentModule] = useState<Module>('HOME')

  const currentRole = ((session?.user as any)?.role || 'VENDEUR') as RoleEmploye
  const visibleModules = modules.filter((module) => module.roles.includes(currentRole))

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/login')
    }
  }, [status, router])

  useEffect(() => {
    const current = modules.find((module) => module.id === currentModule)
    if (current && !current.roles.includes(currentRole)) {
      setCurrentModule('HOME')
    }
  }, [currentModule, currentRole])

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <p className="text-muted-foreground">Chargement...</p>
      </div>
    )
  }

  if (status === 'unauthenticated') return null

  const moduleInfo = modules.find((module) => module.id === currentModule)

  const moduleHeader = (
    <div className="flex items-center gap-4">
      <Button
        variant="outline"
        onClick={() => setCurrentModule('HOME')}
        className="flex items-center gap-2"
      >
        <LayoutDashboard className="h-4 w-4" />
        Retour a l'accueil
      </Button>
      <div className={`flex items-center gap-3 rounded-lg p-4 ${moduleInfo?.color} text-white`}>
        {moduleInfo?.icon}
        <h2 className="text-2xl font-bold">{moduleInfo?.title}</h2>
      </div>
    </div>
  )

  const renderModule = () => {
    if (currentModule === 'HOME') {
      return (
        <div className="space-y-8">
          <div className="space-y-2 text-center">
            <h1 className="text-4xl font-bold text-foreground">OptiqueStock</h1>
            <p className="text-lg text-muted-foreground">
              Systeme de Gestion de Magasin d'Optique
            </p>
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {visibleModules.map((module) => (
              <Card
                key={module.id}
                className="group cursor-pointer border-2 transition-all duration-200 hover:scale-105 hover:border-primary hover:shadow-lg"
                onClick={() => setCurrentModule(module.id)}
              >
                <CardHeader>
                  <div className="mb-2 flex items-center justify-between">
                    <div className={`rounded-lg p-3 ${module.color} text-white`}>{module.icon}</div>
                    {module.badge && (
                      <Badge variant="secondary" className="text-xs">
                        {module.badge}
                      </Badge>
                    )}
                  </div>
                  <CardTitle className="text-lg">{module.title}</CardTitle>
                  <CardDescription className="text-sm">{module.description}</CardDescription>
                </CardHeader>
              </Card>
            ))}
          </div>
        </div>
      )
    }

    if (currentModule === 'CLIENTS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <ClientList />
        </div>
      )
    }

    if (currentModule === 'VENTE') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <POSModule />
        </div>
      )
    }

    if (currentModule === 'PRODUITS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <ProduitListe />
        </div>
      )
    }

    if (currentModule === 'ATELIER') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <AtelierModule />
        </div>
      )
    }

    if (currentModule === 'FOURNISSEURS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <SupplierList />
        </div>
      )
    }

    if (currentModule === 'ACHATS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <PurchaseModule />
        </div>
      )
    }

    if (currentModule === 'RAPPORTS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <ReportsModule />
        </div>
      )
    }

    if (currentModule === 'UTILISATEURS') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <EmployeeManagement />
        </div>
      )
    }

    if (currentModule === 'IA') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <AIAssistant />
        </div>
      )
    }

    if (currentModule === 'VENDEUR_WIZARD') {
      return (
        <div className="space-y-6">
          {moduleHeader}
          <SellerWizard />
        </div>
      )
    }

    return null
  }

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="border-b bg-card shadow-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="rounded-lg bg-primary p-2">
                <Eye className="h-6 w-6 text-primary-foreground" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-foreground">OptiqueStock</h1>
                <p className="text-xs text-muted-foreground">Gestion de Magasin d'Optique</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <ThemeToggle />
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <User className="h-4 w-4" />
                <span className="hidden sm:inline">{session?.user?.name}</span>
                <Badge variant="secondary">{currentRole}</Badge>
              </div>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => signOut({ redirect: false }).then(() => router.replace('/login'))}
                title="Se deconnecter"
              >
                <LogOut className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 py-8">{renderModule()}</main>

      <footer className="mt-auto border-t bg-card">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-center">
            <div className="flex items-center gap-4 text-sm text-muted-foreground">
              <span>Version 1.0.0</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}