[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MessagingLayout } from "@/components/messaging/messaging-layout" export default function Home() { return } [V0_FILE]typescriptreact:file="components/messaging/header.tsx" isMerged="true" "use client" import { Menu, Search, ChevronDown } from "lucide-react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Image from "next/image" interface HeaderProps { onMenuClick?: () => void } export function Header({ onMenuClick }: HeaderProps) { return (

VoxTrend

{/* Mobile search icon */} {/* */}

Alexandre Rangom

{/* */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { Arimo, Arimo as V0_Font_Arimo } from 'next/font/google' // Initialize fonts const _arimo = V0_Font_Arimo({ subsets: ['latin'], weight: ["400","500","600","700"] }) const arimo = Arimo({ subsets: ["latin"] }) export const metadata: Metadata = { title: "VoxTrend - Messageries", description: "Centralisez vos interactions clients", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/shiba-inu-dog-profile-picture.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/shiba-inu-dog-profile-picture-gPiS0Z8v43szIBMbifVKQXDbFTNj7W.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/text_placeholder.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/text_placeholder-8yYgxQ76JxSQ8kMiNRHBblaLkFN3FY.png" isMerged="true" [V0_FILE]typescriptreact:file="components/messaging/sidebar.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Home, MessageSquare, Mail, MessageCircle, Heart, Star, LayoutDashboard, Search, Pencil, Settings, Users, Zap, X, } from "lucide-react" import { cn } from "@/lib/utils" import type { ConnectedAccount } from "./messaging-layout" import { ComposeEmailModal } from "./compose-email-modal" interface SidebarProps { connectedAccounts: ConnectedAccount[] onClose?: () => void } const menuItems = [ { icon: Home, label: "Accueil", count: null }, { icon: MessageSquare, label: "Tous", count: 212 }, { icon: Mail, label: "E-mail", count: 82 }, { icon: MessageCircle, label: "Messagerie", count: 72 }, { icon: Heart, label: "Commentaires", count: 12, badge: 26 }, { icon: Star, label: "Avis clients", count: 12 }, { icon: LayoutDashboard, label: "Dashboard", count: null }, ] const bottomMenuItems = [ { icon: Zap, label: "Automations", count: null }, { icon: Users, label: "Contacts", count: null }, { icon: Settings, label: "Paramètres", count: null }, ] const platformIcons: Record = { trustpilot: (

), google: (

), judgeme: (

), gmail: (

), } export function Sidebar({ connectedAccounts, onClose }: SidebarProps) { const [isComposeOpen, setIsComposeOpen] = useState(false) return (

Messageries

{onClose && ( )}

{/* */}

{connectedAccounts.map((account) => (

{platformIcons[account.platform]}

{account.name} {account.platform === "trustpilot" && "Trustpilot"} {account.platform === "google" && "Google Business"} {account.platform === "judgeme" && "Judge.me"} {account.platform === "gmail" && "Gmail"}

))}

{/* */} setIsComposeOpen(false)} />

) } [V0_FILE]typescriptreact:file="components/messaging/compose-email-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { X, Minus, Maximize2, Minimize2, Paperclip, ImageIcon, Link2, Smile, Trash2, ChevronDown, ChevronUp, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" interface ComposeEmailModalProps { isOpen: boolean onClose: () => void } export function ComposeEmailModal({ isOpen, onClose }: ComposeEmailModalProps) { const [isMinimized, setIsMinimized] = useState(false) const [isMaximized, setIsMaximized] = useState(false) const [isMobileFullScreen, setIsMobileFullScreen] = useState(true) // const [to, setTo] = useState("") const [cc, setCc] = useState("") const [cci, setCci] = useState("") const [showCc, setShowCc] = useState(false) const [showCci, setShowCci] = useState(false) const [subject, setSubject] = useState("") const [body, setBody] = useState("") const [attachments, setAttachments] = useState([]) const fileInputRef = useRef(null) const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 1024) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // if (!isOpen) return null const handleAttachment = (e: React.ChangeEvent) => { const files = e.target.files if (files) { setAttachments((prev) => [...prev, ...Array.from(files)]) } } const removeAttachment = (index: number) => { setAttachments((prev) => prev.filter((_, i) => i !== index)) } const handleSend = () => { console.log({ to, cc, cci, subject, body, attachments }) onClose() } const modalClasses = cn( "fixed z-50 flex flex-col bg-white overflow-hidden", "transition-all duration-300 ease-out", // Mobile: full screen bottom sheet isMobile ? ["inset-x-0 bottom-0 rounded-t-2xl shadow-2xl", isMobileFullScreen ? "top-0" : "h-[70vh]"] : [ // Desktop: floating window "rounded-t-xl shadow-2xl border border-gray-200", isMaximized ? "inset-4 rounded-xl" : isMinimized ? "bottom-0 right-6 w-[280px] h-10" : "bottom-0 right-6 w-[560px] h-[520px]", ], ) // return ( <> {isMobile &&

} {/* */}

{isMobile && (

)}

{ if (isMobile) { setIsMobileFullScreen(!isMobileFullScreen) } else if (isMinimized) { setIsMinimized(false) } }} > {subject || "Nouveau message"}

{isMobile ? ( ) : ( <> )}

{/* */} {!isMinimized && ( <>

À setTo(e.target.value)} placeholder="" className="border-0 shadow-none focus-visible:ring-0 px-2 py-2 lg:py-2.5 text-sm flex-1" />

{!showCc && ( )} {!showCci && ( )}

{showCc && (

Cc setCc(e.target.value)} placeholder="" className="border-0 shadow-none focus-visible:ring-0 px-2 py-2 lg:py-2.5 text-sm flex-1" autoFocus />

)} {showCci && (

Cci setCci(e.target.value)} placeholder="" className="border-0 shadow-none focus-visible:ring-0 px-2 py-2 lg:py-2.5 text-sm flex-1" autoFocus />

)}

setSubject(e.target.value)} placeholder="Objet" className="border-0 shadow-none focus-visible:ring-0 px-0 py-2 lg:py-2.5 text-sm" />

{/* */} {/* Body */}

setBody(e.target.value)}
                placeholder="Rédigez votre message..."
                className="w-full h-full resize-none border-0 p-3 lg:p-4 text-sm focus:outline-none"
              />
            </div>

{/* Attachments preview */}
            {attachments.length > 0 && (
              <div className="border-t border-gray-200 p-2 lg:p-3 flex flex-wrap gap-2 max-h-20 lg:max-h-24 overflow-auto shrink-0">
                {attachments.map((file, index) => (
                  <div
                    key={index}
                    className="flex items-center gap-1.5 lg:gap-2 bg-gray-100 rounded-lg px-2 lg:px-3 py-1 lg:py-1.5 text-xs lg:text-sm"
                  >
                    <Paperclip className="h-3 w-3 lg:h-3.5 lg:w-3.5 text-gray-500" />
                    <span className="truncate max-w-[100px] lg:max-w-[150px]">{file.name}</span>
                    <button onClick={() => removeAttachment(index)} className="text-gray-400 hover:text-gray-600">
                      <X className="h-3 w-3 lg:h-3.5 lg:w-3.5" />
                    </button>
                  </div>
                ))}
              </div>
            )}

<div className="flex items-center justify-between border-t border-gray-200 px-2 lg:px-3 py-2 shrink-0">
              <div className="flex items-center gap-0.5 lg:gap-1">
                <Button
                  onClick={handleSend}
                  className="bg-[#1A73E8] hover:bg-[#1557B0] text-white text-xs lg:text-sm font-medium px-3 lg:px-5 py-1.5 lg:py-2 h-8 lg:h-9 rounded-md"
                >
                  Envoyer
                  <ChevronDown className="h-3.5 w-3.5 lg:h-4 lg:w-4 ml-1 lg:ml-1.5 opacity-70" />
                </Button>

<div className="flex items-center ml-1 lg:ml-2">
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    className="p-1.5 lg:p-2 hover:bg-gray-100 rounded-full transition-colors"
                    title="Joindre un fichier"
                  >
                    <Paperclip className="h-4 w-4 lg:h-5 lg:w-5 text-gray-600" />
                  </button>
                  <button
                    className="hidden sm:block p-1.5 lg:p-2 hover:bg-gray-100 rounded-full transition-colors"
                    title="Insérer un lien"
                  >
                    <Link2 className="h-4 w-4 lg:h-5 lg:w-5 text-gray-600" />
                  </button>
                  <button
                    className="p-1.5 lg:p-2 hover:bg-gray-100 rounded-full transition-colors"
                    title="Insérer un emoji"
                  >
                    <Smile className="h-4 w-4 lg:h-5 lg:w-5 text-gray-600" />
                  </button>
                  <button
                    className="hidden sm:block p-1.5 lg:p-2 hover:bg-gray-100 rounded-full transition-colors"
                    title="Insérer une image"
                  >
                    <ImageIcon className="h-4 w-4 lg:h-5 lg:w-5 text-gray-600" />
                  </button>
                </div>
              </div>

<button
                onClick={onClose}
                className="p-1.5 lg:p-2 hover:bg-gray-100 rounded-full transition-colors"
                title="Supprimer le brouillon"
              >
                <Trash2 className="h-4 w-4 lg:h-5 lg:w-5 text-gray-600" />
              </button>
            </div>
            {/* </CHANGE> */}

<input ref={fileInputRef} type="file" onChange={handleAttachment} className="hidden" multiple />
          </>
        )}
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/messaging/bulk-action-bar.tsx" isMerged="true"
"use client"

import {
  MessageSquare,
  Heart,
  Eye,
  Trash2,
  Tag,
  ChevronLeft,
  ChevronRight,
  Sparkles,
  Loader2,
  Check,
  Send,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"

interface BulkActionBarProps {
  selectedCount: number
  onClearSelection: () => void
}

type GenerationState = "idle" | "generating" | "preview" | "sending" | "sent"

export function BulkActionBar({ selectedCount, onClearSelection }: BulkActionBarProps) {
  const [showConfirmLike, setShowConfirmLike] = useState(false)
  const [generationState, setGenerationState] = useState<GenerationState>("idle")
  const [generatedResponses, setGeneratedResponses] = useState<string[]>([])
  const [currentPreviewIndex, setCurrentPreviewIndex] = useState(0)

const handleGenerateAI = async () => {
    setGenerationState("generating")

// Simulate AI generation with progressive feedback
    await new Promise((resolve) => setTimeout(resolve, 2000))

// Generate mock responses for each item
    const responses = Array.from(
      { length: selectedCount },
      (_, i) =>
        `Bonjour,\n\nMerci pour votre message. Nous avons bien pris en compte votre demande et nous vous répondrons dans les plus brefs délais.\n\nCordialement,\nL'équipe VoxTrend`,
    )

setGeneratedResponses(responses)
    setGenerationState("preview")
  }

const handleSendAll = async () => {
    setGenerationState("sending")
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setGenerationState("sent")

// Reset after showing success
    setTimeout(() => {
      setGenerationState("idle")
      setGeneratedResponses([])
      onClearSelection()
    }, 2000)
  }

const handleCancel = () => {
    setGenerationState("idle")
    setGeneratedResponses([])
  }

return (
    <div className="flex flex-1 flex-col bg-white">
      {/* Top Action Bar */}
      <div className="flex items-center justify-between border-b border-border px-6 py-3">
        <div className="flex items-center gap-4">
          {/* Selection count */}
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#60A5FA] text-white text-sm font-semibold">
            {selectedCount}
          </div>
          <span className="text-sm font-medium text-foreground">{selectedCount} items sélectionnés</span>

{/* Quick actions */}
          <div className="flex items-center gap-1 ml-4">
            <button
              className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted transition-colors"
              onClick={() => setShowConfirmLike(true)}
            >
              <MessageSquare className="h-4 w-4 text-muted-foreground" />
            </button>
            <button
              className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted transition-colors"
              onClick={() => setShowConfirmLike(true)}
            >
              <Heart className="h-4 w-4 text-muted-foreground" />
            </button>
            <button className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted transition-colors">
              <Eye className="h-4 w-4 text-muted-foreground" />
            </button>
            <button className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-muted transition-colors text-red-500">
              <Trash2 className="h-4 w-4" />
            </button>
          </div>
        </div>

<div className="flex items-center gap-3">
          {/* Add Tag button */}
          <Button variant="outline" className="gap-2 rounded-lg bg-transparent">
            <Tag className="h-4 w-4" />
            Ajouter un Tag
          </Button>

{/* Skip / Close */}
          <Button variant="ghost" onClick={onClearSelection}>
            Annuler
          </Button>

{/* Navigation */}
          <div className="flex items-center gap-1">
            <button className="flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted">
              <ChevronLeft className="h-4 w-4 text-muted-foreground" />
            </button>
            <button className="flex h-8 w-8 items-center justify-center rounded-full hover:bg-muted">
              <ChevronRight className="h-4 w-4 text-muted-foreground" />
            </button>
          </div>
        </div>
      </div>

{/* Main Content Area */}
      <div className="flex-1 flex flex-col items-center justify-center p-8">
        {showConfirmLike ? (
          // Confirmation Modal
          <div className="bg-white rounded-2xl shadow-lg border border-border p-6 max-w-md">
            <div className="flex items-start gap-4">
              <div className="flex -space-x-2">
                <div className="h-12 w-12 rounded-lg bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center text-white overflow-hidden border-2 border-white">
                  <Heart className="h-5 w-5" />
                </div>
              </div>
              <div className="flex-1">
                <p className="text-sm text-foreground">
                  Êtes-vous sûr de vouloir liker ces {selectedCount} commentaires ? (Facebook et TikTok uniquement)
                </p>
                <div className="flex items-center gap-3 mt-4">
                  <Button
                    variant="outline"
                    className="rounded-lg bg-transparent"
                    onClick={() => setShowConfirmLike(false)}
                  >
                    Annuler
                  </Button>
                  <Button
                    className="rounded-lg bg-foreground text-white hover:bg-foreground/90"
                    onClick={() => setShowConfirmLike(false)}
                  >
                    OK
                  </Button>
                </div>
              </div>
            </div>
          </div>
        ) : generationState === "idle" ? (
          <div className="text-center space-y-6">
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#F0F4F8] mx-auto">
              <Sparkles className="h-8 w-8 text-[#60A5FA]" />
            </div>
            <div className="space-y-2">
              <p className="text-muted-foreground">Cliquez sur le bouton ci-dessous pour générer une réponse IA.</p>
            </div>
            <Button
              onClick={handleGenerateAI}
              className="gap-2 rounded-full bg-[#60A5FA] text-white hover:bg-[#4A94EA] px-6 py-6 text-base transition-all hover:scale-105 active:scale-95"
            >
              <Sparkles className="h-5 w-5" />
              Générer une réponse IA pour {selectedCount} items
            </Button>
          </div>
        ) : generationState === "generating" ? (
          <div className="text-center space-y-6">
            <div className="relative flex h-20 w-20 items-center justify-center mx-auto">
              {/* Outer spinning ring */}
              <div
                className="absolute inset-0 animate-spin rounded-full border-4 border-[#60A5FA]/20 border-t-[#60A5FA]"
                style={{ animationDuration: "1.5s" }}
              />
              {/* Inner pulsing circle */}
              <div className="absolute inset-2 rounded-full bg-gradient-to-br from-[#60A5FA]/20 to-[#818CF8]/20 animate-pulse" />
              {/* Center icon */}
              <Sparkles className="h-8 w-8 text-[#60A5FA] animate-pulse" />
            </div>
            <div className="space-y-2">
              <p className="text-lg font-medium text-foreground">Génération en cours...</p>
              <p className="text-sm text-muted-foreground">Création de {selectedCount} réponses personnalisées</p>
            </div>
            {/* Progress dots */}
            <div className="flex items-center justify-center gap-2">
              <div className="h-2 w-2 rounded-full bg-[#60A5FA] animate-bounce" style={{ animationDelay: "0ms" }} />
              <div className="h-2 w-2 rounded-full bg-[#60A5FA] animate-bounce" style={{ animationDelay: "150ms" }} />
              <div className="h-2 w-2 rounded-full bg-[#60A5FA] animate-bounce" style={{ animationDelay: "300ms" }} />
            </div>
          </div>
        ) : generationState === "preview" ? (
          <div className="w-full max-w-2xl space-y-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
                  <Check className="h-5 w-5 text-green-600" />
                </div>
                <div>
                  <p className="font-medium text-foreground">{selectedCount} réponses générées</p>
                  <p className="text-sm text-muted-foreground">Prêtes à être envoyées</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="outline" onClick={handleCancel} className="rounded-lg bg-transparent">
                  Annuler
                </Button>
                <Button
                  onClick={handleSendAll}
                  className="gap-2 rounded-lg bg-green-500 text-white hover:bg-green-600 transition-all"
                >
                  <Send className="h-4 w-4" />
                  Envoyer tout
                </Button>
              </div>
            </div>

{/* Preview card */}
            <div className="rounded-xl border border-border bg-[#F8FAFC] p-4 space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-muted-foreground">Aperçu de la réponse type</span>
                <div className="flex items-center gap-1">
                  <button
                    onClick={() => setCurrentPreviewIndex(Math.max(0, currentPreviewIndex - 1))}
                    className="flex h-7 w-7 items-center justify-center rounded hover:bg-white transition-colors"
                    disabled={currentPreviewIndex === 0}
                  >
                    <ChevronLeft className="h-4 w-4 text-muted-foreground" />
                  </button>
                  <span className="text-xs text-muted-foreground px-2">
                    {currentPreviewIndex + 1} / {selectedCount}
                  </span>
                  <button
                    onClick={() => setCurrentPreviewIndex(Math.min(selectedCount - 1, currentPreviewIndex + 1))}
                    className="flex h-7 w-7 items-center justify-center rounded hover:bg-white transition-colors"
                    disabled={currentPreviewIndex === selectedCount - 1}
                  >
                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
                  </button>
                </div>
              </div>
              <div className="rounded-lg bg-white border border-border p-4">
                <p className="text-sm text-foreground whitespace-pre-line">{generatedResponses[currentPreviewIndex]}</p>
              </div>
            </div>
          </div>
        ) : generationState === "sending" ? (
          <div className="text-center space-y-6">
            <div className="relative flex h-20 w-20 items-center justify-center mx-auto">
              <div className="absolute inset-0 rounded-full bg-green-100 animate-ping opacity-50" />
              <div className="relative flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
                <Loader2 className="h-8 w-8 text-green-600 animate-spin" />
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-lg font-medium text-foreground">Envoi en cours...</p>
              <p className="text-sm text-muted-foreground">Envoi de {selectedCount} réponses</p>
            </div>
          </div>
        ) : generationState === "sent" ? (
          <div className="text-center space-y-6">
            <div className="relative flex h-20 w-20 items-center justify-center mx-auto">
              <div className="absolute inset-0 rounded-full bg-green-100 animate-pulse" />
              <div className="relative flex h-16 w-16 items-center justify-center rounded-full bg-green-500">
                <Check className="h-8 w-8 text-white" />
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-lg font-medium text-green-600">Envoyé avec succès !</p>
              <p className="text-sm text-muted-foreground">{selectedCount} réponses ont été envoyées</p>
            </div>
          </div>
        ) : null}
      </div>

{/* Response Input Area - Hide during generation states */}
      {(generationState === "idle" || generationState === "preview") && (
        <div className="border-t border-border px-6 py-4">
          <div className="rounded-xl border border-border bg-white p-4">
            <textarea
              placeholder={`Tapez votre message... Utilisez "/" pour insérer des réponses sauvegardées`}
              className="w-full resize-none border-0 bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none"
              rows={2}
            />
            <div className="flex items-center justify-between mt-2">
              <div className="flex items-center gap-2">
                <button className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-muted text-muted-foreground">
                  <Sparkles className="h-4 w-4" />
                </button>
                <button className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-muted text-muted-foreground">
                  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
                  </svg>
                </button>
                <button className="flex h-8 w-8 items-center justify-center rounded-lg hover:bg-muted text-muted-foreground">
                  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M8 14s1.5 2 4 2 4-2 4-2" />
                    <line x1="9" y1="9" x2="9.01" y2="9" />
                    <line x1="15" y1="9" x2="15.01" y2="9" />
                  </svg>
                </button>
              </div>
              <Button className="rounded-lg bg-muted text-muted-foreground hover:bg-muted" disabled>
                Envoyer
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Add scrollbar-hide utility for mobile horizontal scrolling */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Add safe area insets for mobile devices with notches */
@supports (padding: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* Improve touch targets on mobile */
@media (max-width: 1023px) {
  button,
  [role="button"],
  input,
  textarea,
  select {
    min-height: 44px;
    min-width: 44px;
  }

/* Exception for small icon buttons */
  button.icon-sm,
  [data-icon-button] {
    min-height: 32px;
    min-width: 32px;
  }
}

/* Prevent text selection during touch interactions */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Smooth momentum scrolling on iOS */
.momentum-scroll {
  -webkit-overflow-scrolling: touch;
}
/* </CHANGE> */

:root {
  --background: #f7f6f9;
  --foreground: oklch(0.3015 0.0572 282.4176);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.3015 0.0572 282.4176);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.3015 0.0572 282.4176);
  --primary: oklch(0.5417 0.179 288.0332);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9174 0.0435 292.69);
  --secondary-foreground: oklch(0.4143 0.1039 288.1742);
  --muted: oklch(0.958 0.0133 286.1454);
  --muted-foreground: oklch(0.5426 0.0465 284.743);
  --accent: oklch(0.9221 0.0373 262.141);
  --accent-foreground: oklch(0.3015 0.0572 282.4176);
  --destructive: oklch(0.6861 0.2061 14.9941);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9115 0.0216 285.9625);
  --input: oklch(0.9115 0.0216 285.9625);
  --ring: oklch(0.5417 0.179 288.0332);
  --chart-1: oklch(0.5417 0.179 288.0332);
  --chart-2: #54a6ff;
  --chart-3: #5adcad;
  --chart-4: #ffc73a;
  --chart-5: #ff6e65;
  --radius: 1rem;
  --sidebar: #e0e9f4;
  --sidebar-foreground: oklch(0.3015 0.0572 282.4176);
  --sidebar-primary: oklch(0.5417 0.179 288.0332);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.9221 0.0373 262.141);
  --sidebar-accent-foreground: oklch(0.3015 0.0572 282.4176);
  --sidebar-border: oklch(0.9115 0.0216 285.9625);
  --sidebar-ring: oklch(0.5417 0.179 288.0332);
  --shadow-x: 0px;
  --shadow-y: 0px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.050980392156862744;
  --shadow-color: #dc0c0c;
}

.dark {
  --background: oklch(0.1743 0.0227 283.7998);
  --foreground: oklch(0.9185 0.0257 285.8834);
  --card: oklch(0.2284 0.0384 282.9324);
  --card-foreground: oklch(0.9185 0.0257 285.8834);
  --popover: oklch(0.2284 0.0384 282.9324);
  --popover-foreground: oklch(0.9185 0.0257 285.8834);
  --primary: oklch(0.7162 0.1597 290.3962);
  --primary-foreground: oklch(0.1743 0.0227 283.7998);
  --secondary: oklch(0.3139 0.0736 283.4591);
  --secondary-foreground: oklch(0.8367 0.0849 285.9111);
  --muted: oklch(0.271 0.0621 281.4377);
  --muted-foreground: oklch(0.7166 0.0462 285.1741);
  --accent: oklch(0.3354 0.0828 280.9705);
  --accent-foreground: oklch(0.9185 0.0257 285.8834);
  --destructive: oklch(0.6861 0.2061 14.9941);
  --destructive-foreground: oklch(1.0 0 0);
  --border: oklch(0.3261 0.0597 282.5832);
  --input: oklch(0.3261 0.0597 282.5832);
  --ring: oklch(0.7162 0.1597 290.3962);
  --chart-1: oklch(0.7162 0.1597 290.3962);
  --chart-2: oklch(0.6382 0.1047 274.9117);
  --chart-3: oklch(0.7482 0.1235 244.7492);
  --chart-4: oklch(0.7124 0.0977 186.6761);
  --chart-5: oklch(0.7546 0.1831 346.8124);
  --sidebar: oklch(0.2284 0.0384 282.9324);
  --sidebar-foreground: oklch(0.9185 0.0257 285.8834);
  --sidebar-primary: oklch(0.7162 0.1597 290.3962);
  --sidebar-primary-foreground: oklch(0.1743 0.0227 283.7998);
  --sidebar-accent: oklch(0.3354 0.0828 280.9705);
  --sidebar-accent-foreground: oklch(0.9185 0.0257 285.8834);
  --sidebar-border: oklch(0.3261 0.0597 282.5832);
  --sidebar-ring: oklch(0.7162 0.1597 290.3962);
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 2px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.05;
  --shadow-color: #000000;
}

@theme inline {
  --font-sans: "Arimo", "Arimo Fallback";
  --font-mono: "Arimo", "Arimo Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-serif: "Arimo", "Arimo Fallback";
  /* computed shadow variables below - do not modify */
  --shadow-2xs: var(--shadow-x) var(--shadow-y)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3)
    calc(var(--shadow-spread) - 1px)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5)
    calc(var(--shadow-spread) - 3px)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7)
    calc(var(--shadow-spread) - 5px)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px))
    calc(var(--shadow-spread) - 12px)
    color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);
  --shadow: var(--shadow-md);
  --color-shadow-color: var(--shadow-color);
  --shadow-opacity: var(--shadow-opacity);
  --shadow-spread: var(--shadow-spread);
  --shadow-blur: var(--shadow-blur);
  --shadow-y: var(--shadow-y);
  --shadow-x: var(--shadow-x);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/messaging/messaging-layout.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Header } from "./header"
import { Sidebar } from "./sidebar"
import { ConversationList } from "./conversation-list"
import { MessageDetail } from "./message-detail"
import { BulkActionBar } from "./bulk-action-bar"

export type MessageState = "initial" | "processing" | "responded" | "escalated"

export interface Conversation {
  id: string
  name: string
  initials: string
  avatar?: string
  preview: string
  time: string
  tag: string
  tagColor: "sav" | "intention" | "negative" | "positive"
  source: "whatsapp" | "gmail" | "google" | "trustpilot" | "judgeme" | "instagram"
  sentiment: "positive" | "negative" | "neutral"
  read: boolean
  platform?: string
  urgency: Urgency
  assignedTo: Assignee
  needsModeration: boolean
}

export interface Attachment {
  id: string
  type: "image" | "file"
  name: string
  url: string
  size?: string
}

export interface Message {
  id: string
  sender: "customer" | "agent"
  initials: string
  content: string
  timestamp?: string
  attachments?: Attachment[]
}

export interface ConnectedAccount {
  id: string
  name: string
  platform: "trustpilot" | "google" | "judgeme" | "gmail"
}

const connectedAccounts: ConnectedAccount[] = [
  { id: "1", name: "Air France", platform: "trustpilot" },
  { id: "2", name: "Air France", platform: "google" },
  { id: "3", name: "Air France", platform: "gmail" },
]

const conversationMessages: Record<string, string> = {
  "1": `Bonjour,

Mon vol AF1234 Paris-New York du 15 janvier a été annulé sans préavis. J'ai reçu un simple SMS 2h avant le départ alors que j'étais déjà à l'aéroport.

On m'a proposé un vol le lendemain mais j'avais une réunion importante. J'ai dû prendre un vol chez un concurrent à mes frais (850€).

Je demande le remboursement intégral de mon billet (1200€) + les frais du vol de remplacement + une compensation pour le préjudice subi.

Référence réservation : XKPT7M
Numéro Flying Blue : 123456789

Dans l'attente de votre réponse rapide.
Marc Dubois`,

"2": `1 star - A FUIR ABSOLUMENT

Vol Paris-Tokyo annulé, 14h d'attente à CDG sans aucune information. Personnel débordé et désagréable. Aucun bon repas, aucune solution d'hébergement proposée.

Finalement redirigé via Dubaï avec 28h de retard total. Bagages perdus pendant 5 jours.

Le service client est injoignable, les formulaires en ligne ne fonctionnent pas. 3 mois plus tard, toujours aucune compensation reçue malgré le règlement EU261.

Air France n'est plus la compagnie qu'elle était. Honteux pour une compagnie nationale.`,

"3": `Avis Google - 2 etoiles

Déçue par mon dernier vol en Business. Pour le prix payé (4500€ l'aller-retour), je m'attendais à mieux :
- Siège qui ne s'inclinait pas complètement 
- Écran tactile défaillant
- Repas froid servi avec 1h de retard
- Wifi payant qui ne fonctionnait pas

L'équipage était sympathique mais visiblement en sous-effectif. La compagnie fait des économies sur tout et ça se voit.

Je voyage 15 fois par an en business, je vais sérieusement reconsidérer mes choix de compagnie.`,

"4": `Objet : Demande de remboursement - Vol AF789 du 22/01

Madame, Monsieur,

Suite à mon vol AF789 Paris-Barcelone du 22 janvier, je souhaite signaler la perte définitive de ma valise (référence dossier : CDGAF12345).

Malgré mes multiples relances depuis 3 semaines, je n'ai aucune nouvelle. Ma valise contenait des effets personnels d'une valeur de 1500€ ainsi que des documents professionnels importants.

Je vous prie de bien vouloir :
1. Me confirmer que la valise est définitivement perdue
2. M'indiquer la procédure d'indemnisation
3. Me fournir un numéro de dossier pour mon assurance

Cordialement,
Sophie Martin
Tel : 06 12 34 56 78
Email : sophie.martin@email.com`,

"5": `Excellent vol Paris-Singapour en Première !

Je tenais à féliciter l'équipage du vol AF256 du 18 janvier. Le service était absolument impeccable :
- Accueil personnalisé au salon
- Champagne Krug servi avec le sourire
- Chef à bord qui a préparé un menu sur mesure
- Attention constante sans être intrusive

Mention spéciale à Marie, chef de cabine, qui a rendu ce vol mémorable. C'est exactement ce niveau de service qui justifie de choisir Air France.

Je suis client Flying Blue Platinum depuis 12 ans et c'est l'un de mes meilleurs vols.

Bravo et merci !`,

"6": `Bonjour Air France,

J'aimerais savoir si je peux modifier ma réservation YHNB8K (Paris-Lisbonne le 5 février) pour partir plutôt le 3 février ?

Mon billet est un tarif Light, est-ce que le changement est possible et à quel coût ?

Aussi, je voudrais ajouter un bagage en soute. Quel est le tarif si je le fais maintenant vs à l'aéroport ?

Merci d'avance,
Thomas Petit`,

"7": `Avis Trustpilot - 5 etoiles

Après une mauvaise expérience il y a 2 ans, j'ai redonné sa chance à Air France et je ne regrette pas !

Vol Paris-Miami en Premium Economy :
- Siège très confortable avec bon espace
- Repas de qualité (mention spéciale pour le dessert)
- Équipage aux petits soins
- Atterrissage avec 20 min d'avance

Le programme Flying Blue est généreux et le salon à CDG vaut le détour.

Je recommande !`,

"8": `URGENT - Besoin d'assistance spéciale

Bonjour,

Je dois voyager avec ma mère de 87 ans qui est en fauteuil roulant et sous oxygène médical.

Vol réservé : AF1680 Paris-Nice le 10 février
Référence : PMRW9X

Questions :
1. Comment déclarer le besoin d'oxygène à bord ?
2. Le fauteuil sera-t-il mis en soute ou en cabine ?
3. Peut-on avoir une assistance de bout en bout ?
4. Y a-t-il des places avec plus d'espace disponibles ?

Merci de me répondre rapidement, le vol est dans 2 semaines.

Claire Durand
06 98 76 54 32`,
}

const conversations: Conversation[] = [
  {
    id: "1",
    name: "Marc Dubois",
    initials: "MD",
    preview: "Mon vol AF1234 a été annulé sans préavis...",
    time: "5m",
    tag: "SAV",
    tagColor: "sav",
    source: "gmail",
    sentiment: "negative",
    read: false,
    urgency: "haute",
    assignedTo: "non-attribué",
    needsModeration: false,
  },
  {
    id: "2",
    name: "Jean-Pierre Moreau",
    initials: "JM",
    preview: "1 star - A FUIR ABSOLUMENT...",
    time: "12m",
    tag: "Avis Négatif",
    tagColor: "negative",
    source: "trustpilot",
    sentiment: "negative",
    read: false,
    urgency: "critique",
    assignedTo: "Marie D.",
    needsModeration: true,
  },
  {
    id: "3",
    name: "Isabelle Chen",
    initials: "IC",
    preview: "Déçue par mon dernier vol en Business...",
    time: "25m",
    tag: "Avis Négatif",
    tagColor: "negative",
    source: "google",
    sentiment: "negative",
    read: false,
    urgency: "moyenne",
    assignedTo: "non-attribué",
    needsModeration: false,
  },
  {
    id: "4",
    name: "Sophie Martin",
    initials: "SM",
    preview: "Demande de remboursement - bagage perdu...",
    time: "1h",
    tag: "SAV",
    tagColor: "sav",
    source: "gmail",
    sentiment: "negative",
    read: true,
    urgency: "haute",
    assignedTo: "Alexandre R.",
    needsModeration: false,
  },
  {
    id: "5",
    name: "François Leblanc",
    initials: "FL",
    preview: "Excellent vol Paris-Singapour en Première !",
    time: "2h",
    tag: "Avis Positif",
    tagColor: "positive",
    source: "trustpilot",
    sentiment: "positive",
    read: true,
    urgency: "basse",
    assignedTo: "non-attribué",
    needsModeration: false,
  },
  {
    id: "6",
    name: "Thomas Petit",
    initials: "TP",
    preview: "J'aimerais modifier ma réservation...",
    time: "3h",
    tag: "Intention d'achat",
    tagColor: "intention",
    source: "gmail",
    sentiment: "neutral",
    read: true,
    urgency: "basse",
    assignedTo: "Thomas L.",
    needsModeration: false,
  },
  {
    id: "7",
    name: "Amélie Rousseau",
    initials: "AR",
    preview: "5 etoiles - Je recommande !",
    time: "4h",
    tag: "Avis Positif",
    tagColor: "positive",
    source: "trustpilot",
    sentiment: "positive",
    read: true,
    urgency: "basse",
    assignedTo: "non-attribué",
    needsModeration: false,
  },
  {
    id: "8",
    name: "Claire Durand",
    initials: "CD",
    preview: "URGENT - Assistance spéciale mère 87 ans...",
    time: "5h",
    tag: "SAV",
    tagColor: "sav",
    source: "gmail",
    sentiment: "neutral",
    read: true,
    urgency: "critique",
    assignedTo: "non-attribué",
    needsModeration: true,
  },
]

const customerMessage = `Bonjour,

Mon vol AF1234 Paris-New York du 15 janvier a été annulé sans préavis. J'ai reçu un simple SMS 2h avant le départ alors que j'étais déjà à l'aéroport.

On m'a proposé un vol le lendemain mais j'avais une réunion importante. J'ai dû prendre un vol chez un concurrent à mes frais (850€).

Je demande le remboursement intégral de mon billet (1200€) + les frais du vol de remplacement + une compensation pour le préjudice subi.

Référence réservation : XKPT7M
Numéro Flying Blue : 123456789

Dans l'attente de votre réponse rapide.
Marc Dubois`

const initialConversations = conversations

export function MessagingLayout() {
  const [conversationData, setConversationData] = useState<Conversation[]>(initialConversations)
  const [selectedConversation, setSelectedConversation] = useState<string>("1")
  const [messageState, setMessageState] = useState<MessageState>("initial")
  const [selectedIds, setSelectedIds] = useState<string[]>([])
  const [selectionMode, setSelectionMode] = useState(false)
  const [mobileView, setMobileView] = useState<"list" | "detail">("list")
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      sender: "customer",
      initials: initialConversations[0].initials,
      content: conversationMessages["1"],
    },
  ])

const handleUpdateConversation = (id: string, updates: Partial<Pick<Conversation, "urgency" | "assignedTo" | "needsModeration">>) => {
    setConversationData((prev) =>
      prev.map((c) => (c.id === id ? { ...c, ...updates } : c))
    )
  }

const handleTraiterTicket = () => {
    setMessageState("processing")
  }

const handleSurencherir = () => {
    setMessages([
      {
        id: "1",
        sender: "agent",
        initials: "MR",
        content: conversationMessages[selectedConversation],
      },
      {
        id: "2",
        sender: "customer",
        initials: "MR",
        content: conversationMessages[selectedConversation],
      },
    ])
    setMessageState("escalated")
  }

const handleSendMessage = (content: string, attachments: Attachment[]) => {
    if (!content.trim() && attachments.length === 0) return

const newMessage: Message = {
      id: Date.now().toString(),
      sender: "agent",
      initials: "AR",
      content: content,
      timestamp: new Date().toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }),
      attachments: attachments.length > 0 ? attachments : undefined,
    }

setMessages((prev) => [...prev, newMessage])

if (messageState === "initial" || messageState === "processing") {
      setMessageState("responded")
    }
  }

const handleRepondre = () => {
    setMessages([
      {
        id: "1",
        sender: "agent",
        initials: "MR",
        content: `Pouvez-vous m'indiquer la procédure pour un échange ou un remboursement s'il vous plaît ?
Je reste disponible pour vous envoyer des photos si nécessaire.

Merci d'avance pour votre retour,
Cordialement.`,
      },
      {
        id: "2",
        sender: "customer",
        initials: "MR",
        content: conversationMessages[selectedConversation],
      },
    ])
    setMessageState("responded")
  }

const handleToggleSelect = (id: string) => {
    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]))
  }

const handleSelectAll = () => {
    if (selectedIds.length === conversationData.length) {
      setSelectedIds([])
    } else {
      setSelectedIds(conversationData.map((c) => c.id))
    }
  }

const handleClearSelection = () => {
    setSelectedIds([])
    setSelectionMode(false)
  }

const handleToggleSelectionMode = () => {
    setSelectionMode((prev) => {
      if (prev) {
        setSelectedIds([])
      }
      return !prev
    })
  }

const handleSelectConversation = (id: string) => {
    setSelectedConversation(id)
    setMobileView("detail")
    const conversation = conversationData.find((c) => c.id === id)
    if (conversation) {
      setMessageState("initial")
      setMessages([
        {
          id: "1",
          sender: "customer",
          initials: conversation.initials,
          content: conversationMessages[id] || "",
        },
      ])
    }
  }

const handleBackToList = () => {
    setMobileView("list")
  }

const handleNextConversation = () => {
    const currentIndex = conversationData.findIndex((c) => c.id === selectedConversation)
    if (currentIndex < conversationData.length - 1) {
      const nextConversation = conversationData[currentIndex + 1]
      setSelectedConversation(nextConversation.id)
      setMessageState("initial")
      setMessages([
        {
          id: "1",
          sender: "customer",
          initials: nextConversation.initials,
          content: conversationMessages[nextConversation.id] || "",
        },
      ])
    }
  }

const handlePreviousConversation = () => {
    const currentIndex = conversationData.findIndex((c) => c.id === selectedConversation)
    if (currentIndex > 0) {
      setSelectedConversation(conversationData[currentIndex - 1].id)
      setMessageState("initial")
      setMessages([
        {
          id: "1",
          sender: "customer",
          initials: conversationData[currentIndex - 1].initials,
          content: conversationMessages[conversationData[currentIndex - 1].id],
        },
      ])
    }
  }

const currentConversationIndex = conversationData.findIndex((c) => c.id === selectedConversation) + 1

return (
    <div className="flex h-screen flex-col bg-background">
      <Header onMenuClick={() => setSidebarOpen(true)} />

<div className="flex flex-1 overflow-hidden">
        {sidebarOpen && (
          <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
        )}

<div
          className={`
          fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out lg:relative lg:z-0 lg:w-60 lg:translate-x-0
          ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
        `}
        >
          <Sidebar connectedAccounts={connectedAccounts} onClose={() => setSidebarOpen(false)} />
        </div>

<div
          className={`
          w-full flex-1 min-w-0
          ${mobileView === "list" ? "hidden lg:flex" : "flex"}
        `}
        >
          {selectedIds.length > 0 ? (
            <BulkActionBar selectedCount={selectedIds.length} onClearSelection={handleClearSelection} />
          ) : (
            <MessageDetail
              conversation={conversationData.find((c) => c.id === selectedConversation)!}
              messages={messages}
              state={messageState}
              onTraiterTicket={handleTraiterTicket}
              onRepondre={handleRepondre}
              onSendMessage={handleSendMessage}
              onBack={handleBackToList}
              onNext={handleNextConversation}
              onPrevious={handlePreviousConversation}
              currentIndex={currentConversationIndex}
              totalCount={conversationData.length}
              source={conversationData.find((c) => c.id === selectedConversation)?.source}
              onUpdateConversation={handleUpdateConversation}
            />
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messaging/conversation-list.tsx" isMerged="true"
"use client"

import type React from "react"
import { ChevronDown, CheckCircle2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "@/components/ui/button"
import type { Conversation } from "./messaging-layout"

interface ConversationListProps {
  conversations: Conversation[]
  selectedId: string
  selectedIds: string[]
  selectionMode: boolean
  onSelect: (id: string) => void
  onToggleSelect: (id: string) => void
  onSelectAll: () => void
  onToggleSelectionMode: () => void
}

const tagStyles = {
  sav: "bg-[#FFE5E5] text-[#E53935]",
  intention: "bg-gray-100 text-gray-700 border border-gray-200",
  negative: "bg-[#FFE5E5] text-[#E53935]",
  positive: "bg-[#E8F5E9] text-[#43A047]",
}

const platformIconBadges: Record<string, React.ReactNode> = {
  whatsapp: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-[#25D366]">
      <svg viewBox="0 0 24 24" className="h-2.5 w-2.5 lg:h-3 lg:w-3" fill="white">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
      </svg>
    </div>
  ),
  instagram: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500">
      <svg viewBox="0 0 24 24" className="h-2.5 w-2.5 lg:h-3 lg:w-3" fill="white">
        <rect x="6" y="6" width="12" height="12" rx="3" stroke="white" strokeWidth="2" fill="none" />
        <circle cx="12" cy="12" r="2.5" stroke="white" strokeWidth="2" fill="none" />
        <circle cx="16.5" cy="7.5" r="0.8" fill="white" />
      </svg>
    </div>
  ),
  google: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-white border border-gray-200">
      <span className="text-[8px] lg:text-[10px] font-bold text-[#4285F4]">G</span>
    </div>
  ),
  gmail: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-white border border-gray-200">
      <svg viewBox="0 0 24 24" className="h-2.5 w-2.5 lg:h-3 lg:w-3">
        <path fill="#EA4335" d="M3.5 6.5v11c0 .83.67 1.5 1.5 1.5h14c.83 0 1.5-.67 1.5-1.5v-11l-8.5 5.5z" />
        <path fill="#4285F4" d="M20.5 6.5l-8.5 5.5-8.5-5.5V5c0-.83.67-1.5 1.5-1.5h14c.83 0 1.5.67 1.5 1.5z" />
      </svg>
    </div>
  ),
  trustpilot: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-[#00B67A]">
      <svg viewBox="0 0 24 24" className="h-2.5 w-2.5 lg:h-3 lg:w-3" fill="white">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
      </svg>
    </div>
  ),
  judgeme: (
    <div className="flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-[#FFBB00]">
      <svg viewBox="0 0 24 24" className="h-2.5 w-2.5 lg:h-3 lg:w-3" fill="white">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
      </svg>
    </div>
  ),
}

export function ConversationList({
  conversations,
  selectedId,
  selectedIds,
  selectionMode,
  onSelect,
  onToggleSelect,
  onSelectAll,
  onToggleSelectionMode,
}: ConversationListProps) {
  const handleItemClick = (id: string) => {
    if (selectionMode) {
      onToggleSelect(id)
    } else {
      onSelect(id)
    }
  }

return (
    <div className="flex w-full flex-col border-r border-border bg-white">
      {/* Header */}
      <div className="flex items-center gap-3 border-b border-border p-3 lg:p-4">
        <div className="flex h-9 w-9 lg:h-10 lg:w-10 items-center justify-center rounded-lg bg-[#F0F4F8]">
          <svg
            viewBox="0 0 24 24"
            className="h-4 w-4 lg:h-5 lg:w-5 text-muted-foreground"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
          >
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
            <polyline points="9,22 9,12 15,12 15,22" />
          </svg>
        </div>
        <h3 className="text-base lg:text-lg font-semibold text-foreground">Alexandre Rangom</h3>
      </div>

<div className="flex items-center justify-between border-b border-border px-3 lg:px-4 py-2">
        <div className="flex items-center gap-2 lg:gap-3">
          <Button
            variant="ghost"
            size="sm"
            onClick={onToggleSelectionMode}
            className={cn(
              "h-6 lg:h-7 gap-1 lg:gap-1.5 rounded-md px-1.5 lg:px-2 text-xs lg:text-sm font-normal transition-all duration-200 whitespace-nowrap",
              selectionMode
                ? "bg-blue-500 text-white hover:bg-blue-600"
                : "text-gray-600 hover:bg-gray-100 hover:text-gray-800",
            )}
          >
            <CheckCircle2 className="h-3 w-3 lg:h-4 lg:w-4" />
            <span className="hidden sm:inline">Sélect.</span>
          </Button>

<button className="flex items-center gap-1 text-xs lg:text-sm font-normal text-gray-600 hover:text-gray-800 transition-colors whitespace-nowrap">
            <span>Plus récent</span>
            <ChevronDown className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-gray-400" />
          </button>
        </div>

<div className="flex items-center gap-1.5 lg:gap-2">
          <span className="text-xs lg:text-sm font-normal text-gray-600 whitespace-nowrap">Non lu</span>
          <Switch defaultChecked className="data-[state=checked]:bg-blue-500 scale-[0.65] lg:scale-75" />
        </div>
      </div>
      {/* </CHANGE> */}

<div className="flex-1 overflow-y-auto">
        <div className="divide-y divide-gray-100">
          {conversations.map((conversation) => {
            const isSelected = selectedId === conversation.id
            const isChecked = selectedIds.includes(conversation.id)
            const isUnread = conversation.id === "1" || conversation.id === "3"

return (
              <div
                key={conversation.id}
                onClick={() => handleItemClick(conversation.id)}
                className={cn(
                  "group relative flex items-center gap-2 lg:gap-3 px-3 lg:px-4 py-3 lg:py-3.5 cursor-pointer",
                  "transition-all duration-200 ease-out active:bg-gray-100",
                  isUnread && !isSelected && "bg-blue-50/70",
                  isSelected && !selectionMode ? "bg-gray-100" : "hover:bg-gray-50/60",
                  isChecked && "bg-blue-50/60",
                  selectionMode && "hover:bg-blue-50/40",
                )}
              >
                {isSelected && !selectionMode && (
                  <div className="absolute left-0 top-3 bottom-3 w-[3px] rounded-r-full bg-blue-500" />
                )}

{isUnread && !isSelected && !selectionMode && (
                  <div className="absolute left-0 top-2 bottom-2 w-1 rounded-r-full bg-blue-500" />
                )}

{selectionMode && (
                  <div className="shrink-0 flex items-center justify-center">
                    <Checkbox
                      checked={isChecked}
                      className={cn(
                        "h-4 w-4 rounded-full border-2 transition-all duration-200",
                        isChecked ? "bg-blue-500 border-blue-500 text-white" : "border-gray-300 hover:border-blue-400",
                      )}
                    />
                  </div>
                )}
                {/* </CHANGE> */}

{/* Avatar with platform badge */}
                <div className="relative shrink-0">
                  <div
                    className={cn(
                      "h-10 w-10 lg:h-11 lg:w-11 overflow-hidden rounded-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center",
                      "transition-transform duration-200",
                      selectionMode && "group-hover:scale-95",
                    )}
                  >
                    <span className="text-xs lg:text-sm font-semibold text-gray-500">
                      {conversation.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")
                        .slice(0, 2)}
                    </span>
                  </div>
                  <div className="absolute -bottom-0.5 -right-0.5 rounded-full ring-2 ring-white">
                    {platformIconBadges[conversation.source]}
                  </div>
                </div>

{/* Content */}
                <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:gap-1">
                  <div className="flex items-center gap-1.5 lg:gap-2">
                    {isUnread && (
                      <span className="shrink-0 rounded px-1 lg:px-1.5 py-0.5 text-[9px] lg:text-[10px] font-bold uppercase tracking-wide bg-blue-500 text-white">
                        New
                      </span>
                    )}
                    <span
                      className={cn(
                        "text-xs lg:text-sm truncate transition-colors flex-1",
                        isUnread ? "font-bold text-gray-900" : "font-medium text-gray-700",
                        isSelected && "text-gray-900",
                      )}
                    >
                      {conversation.name}
                    </span>
                    <span
                      className={cn(
                        "shrink-0 rounded-full px-1.5 lg:px-2 py-0.5 text-[9px] lg:text-[11px] font-medium whitespace-nowrap",
                        tagStyles[conversation.tagColor],
                      )}
                    >
                      {conversation.tag}
                    </span>
                  </div>
                  <div className="flex items-center gap-1.5 lg:gap-2">
                    <p
                      className={cn(
                        "truncate text-xs lg:text-sm leading-relaxed transition-colors flex-1",
                        isUnread ? "font-semibold text-gray-800" : "font-normal text-gray-500",
                        isSelected && "text-gray-600",
                      )}
                    >
                      {conversation.preview}
                    </p>
                    <div className="flex items-center gap-1 shrink-0">
                      {/* Urgency dot */}
                      {(conversation.urgency === "haute" || conversation.urgency === "critique") && (
                        <span
                          className={cn(
                            "h-1.5 w-1.5 lg:h-2 lg:w-2 rounded-full shrink-0",
                            conversation.urgency === "haute" ? "bg-orange-500" : "bg-red-500",
                          )}
                          title={conversation.urgency === "haute" ? "Urgence haute" : "Urgence critique"}
                        />
                      )}
                      {/* Moderation icon */}
                      {conversation.needsModeration && (
                        <span className="flex h-3.5 w-3.5 lg:h-4 lg:w-4 items-center justify-center rounded-full bg-purple-100 shrink-0" title="Modération requise">
                          <svg viewBox="0 0 24 24" className="h-2 w-2 lg:h-2.5 lg:w-2.5 text-purple-600" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                          </svg>
                        </span>
                      )}
                      {/* Assignee dot */}
                      {conversation.assignedTo !== "non-attribué" && (
                        <span className="flex h-3.5 w-3.5 lg:h-4 lg:w-4 items-center justify-center rounded-full bg-blue-100 shrink-0" title={`Attribué à ${conversation.assignedTo}`}>
                          <svg viewBox="0 0 24 24" className="h-2 w-2 lg:h-2.5 lg:w-2.5 text-blue-600" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                            <circle cx="12" cy="7" r="4" />
                          </svg>
                        </span>
                      )}
                      <span
                        className={cn(
                          "text-[10px] lg:text-xs shrink-0",
                          isUnread ? "font-semibold text-blue-600" : "text-gray-400",
                        )}
                      >
                        {conversation.time}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
      {/* </CHANGE> */}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messaging/ticket-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  X,
  AlertTriangle,
  User,
  Shield,
  ChevronDown,
  Clock,
  Tag,
  MessageSquare,
} from "lucide-react"
import { cn } from "@/lib/utils"
import type { Conversation, Urgency, Assignee } from "./messaging-layout"

interface TicketPanelProps {
  conversation: Conversation
  onUpdateConversation: (
    id: string,
    updates: Partial<Pick<Conversation, "urgency" | "assignedTo" | "needsModeration">>
  ) => void
  onClose: () => void
}

const urgencyConfig: Record<
  Urgency,
  { label: string; color: string; bg: string; dot: string }
> = {
  basse: {
    label: "Basse",
    color: "text-gray-700",
    bg: "bg-gray-100",
    dot: "bg-gray-400",
  },
  moyenne: {
    label: "Moyenne",
    color: "text-amber-700",
    bg: "bg-amber-50",
    dot: "bg-amber-400",
  },
  haute: {
    label: "Haute",
    color: "text-orange-700",
    bg: "bg-orange-50",
    dot: "bg-orange-500",
  },
  critique: {
    label: "Critique",
    color: "text-red-700",
    bg: "bg-red-50",
    dot: "bg-red-500",
  },
}

const urgencyOptions: Urgency[] = ["basse", "moyenne", "haute", "critique"]
const assigneeOptions: Assignee[] = [
  "non-attribue",
  "Alexandre R.",
  "Marie D.",
  "Thomas L.",
] as Assignee[]

export function TicketPanel({
  conversation,
  onUpdateConversation,
  onClose,
}: TicketPanelProps) {
  const [openSection, setOpenSection] = useState<
    "urgency" | "assignee" | null
  >(null)

const urg = urgencyConfig[conversation.urgency]

const sourceLabel =
    conversation.source === "gmail"
      ? "E-mail"
      : conversation.source === "trustpilot"
        ? "Trustpilot"
        : conversation.source === "google"
          ? "Google"
          : conversation.source === "instagram"
            ? "Instagram"
            : conversation.source === "whatsapp"
              ? "WhatsApp"
              : conversation.source

return (
    <div className="flex h-full w-[280px] flex-col border-l border-border bg-white">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-border px-4 py-3">
        <h3 className="text-sm font-semibold text-foreground">
          Gestion du ticket
        </h3>
        <button
          onClick={onClose}
          className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
        >
          <X className="h-4 w-4" />
        </button>
      </div>

{/* Content */}
      <div className="flex-1 overflow-y-auto p-4">
        {/* Summary card */}
        <div className="mb-5 rounded-lg border border-border bg-[#F8F9FB] p-3">
          <div className="flex items-center gap-2 mb-2">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-[#F0F4F8] text-xs font-semibold text-foreground">
              {conversation.initials}
            </div>
            <div className="min-w-0 flex-1">
              <p className="text-sm font-medium text-foreground truncate">
                {conversation.name}
              </p>
              <p className="text-xs text-muted-foreground">{conversation.time}</p>
            </div>
          </div>
          <div className="flex items-center gap-1.5 flex-wrap">
            <span className="rounded-full bg-[#E8F4FD] px-2 py-0.5 text-[11px] font-medium text-[#1E88E5]">
              {conversation.tag}
            </span>
            <span className="flex items-center gap-1 text-[11px] text-muted-foreground">
              <MessageSquare className="h-3 w-3" />
              {sourceLabel}
            </span>
          </div>
        </div>

{/* Urgency */}
        <div className="mb-4">
          <button
            onClick={() =>
              setOpenSection(openSection === "urgency" ? null : "urgency")
            }
            className="flex w-full items-center justify-between mb-2"
          >
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-3.5 w-3.5 text-muted-foreground" />
              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                Urgence
              </span>
            </div>
            <ChevronDown
              className={cn(
                "h-3.5 w-3.5 text-muted-foreground transition-transform",
                openSection === "urgency" && "rotate-180"
              )}
            />
          </button>
          {openSection === "urgency" ? (
            <div className="grid grid-cols-2 gap-1.5">
              {urgencyOptions.map((u) => {
                const cfg = urgencyConfig[u]
                const isActive = conversation.urgency === u
                return (
                  <button
                    key={u}
                    onClick={() => {
                      onUpdateConversation(conversation.id, { urgency: u })
                    }}
                    className={cn(
                      "flex items-center gap-1.5 rounded-lg border px-2.5 py-2 text-xs font-medium transition-all",
                      isActive
                        ? cn(cfg.bg, cfg.color, "border-current/20 ring-1 ring-current/10")
                        : "border-border bg-white text-muted-foreground hover:bg-gray-50"
                    )}
                  >
                    <span
                      className={cn("h-2 w-2 rounded-full shrink-0", cfg.dot)}
                    />
                    {cfg.label}
                  </button>
                )
              })}
            </div>
          ) : (
            <div
              className={cn(
                "flex items-center gap-1.5 rounded-lg border px-2.5 py-2 text-xs font-medium",
                urg.bg,
                urg.color,
                "border-current/15"
              )}
            >
              <span className={cn("h-2 w-2 rounded-full shrink-0", urg.dot)} />
              {urg.label}
            </div>
          )}
        </div>

{/* Assignment */}
        <div className="mb-4">
          <button
            onClick={() =>
              setOpenSection(openSection === "assignee" ? null : "assignee")
            }
            className="flex w-full items-center justify-between mb-2"
          >
            <div className="flex items-center gap-2">
              <User className="h-3.5 w-3.5 text-muted-foreground" />
              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                Attribution
              </span>
            </div>
            <ChevronDown
              className={cn(
                "h-3.5 w-3.5 text-muted-foreground transition-transform",
                openSection === "assignee" && "rotate-180"
              )}
            />
          </button>
          {openSection === "assignee" ? (
            <div className="flex flex-col gap-1">
              {(
                [
                  "non-attribue",
                  "Alexandre R.",
                  "Marie D.",
                  "Thomas L.",
                ] as const
              ).map((a) => {
                const displayName =
                  a === "non-attribue" ? "Non attribue" : a
                const isActive =
                  conversation.assignedTo === a ||
                  (a === "non-attribue" &&
                    conversation.assignedTo === "non-attribue")
                return (
                  <button
                    key={a}
                    onClick={() => {
                      onUpdateConversation(conversation.id, {
                        assignedTo: a as Assignee,
                      })
                    }}
                    className={cn(
                      "flex items-center gap-2 rounded-lg border px-2.5 py-2 text-xs font-medium transition-all text-left",
                      isActive
                        ? "border-blue-200 bg-blue-50 text-blue-700"
                        : "border-border bg-white text-muted-foreground hover:bg-gray-50"
                    )}
                  >
                    <div
                      className={cn(
                        "flex h-5 w-5 items-center justify-center rounded-full text-[9px] font-bold shrink-0",
                        isActive
                          ? "bg-blue-200 text-blue-700"
                          : "bg-gray-100 text-gray-500"
                      )}
                    >
                      {a === "non-attribue" ? "?" : a.charAt(0)}
                    </div>
                    {displayName}
                  </button>
                )
              })}
            </div>
          ) : (
            <div
              className={cn(
                "flex items-center gap-2 rounded-lg border px-2.5 py-2 text-xs font-medium",
                conversation.assignedTo !== "non-attribue"
                  ? "border-blue-200 bg-blue-50 text-blue-700"
                  : "border-border bg-white text-muted-foreground"
              )}
            >
              <div
                className={cn(
                  "flex h-5 w-5 items-center justify-center rounded-full text-[9px] font-bold shrink-0",
                  conversation.assignedTo !== "non-attribue"
                    ? "bg-blue-200 text-blue-700"
                    : "bg-gray-100 text-gray-500"
                )}
              >
                {conversation.assignedTo === "non-attribue"
                  ? "?"
                  : conversation.assignedTo.charAt(0)}
              </div>
              {conversation.assignedTo === "non-attribue"
                ? "Non attribue"
                : conversation.assignedTo}
            </div>
          )}
        </div>

{/* Moderation */}
        <div className="mb-4">
          <div className="flex items-center gap-2 mb-2">
            <Shield className="h-3.5 w-3.5 text-muted-foreground" />
            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
              {"Mod\u00e9ration"}
            </span>
          </div>
          <button
            onClick={() =>
              onUpdateConversation(conversation.id, {
                needsModeration: !conversation.needsModeration,
              })
            }
            className={cn(
              "flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 transition-all text-left",
              conversation.needsModeration
                ? "border-purple-200 bg-purple-50"
                : "border-border bg-white hover:bg-gray-50"
            )}
          >
            {/* Toggle */}
            <div
              className={cn(
                "relative h-5 w-9 rounded-full transition-colors shrink-0",
                conversation.needsModeration ? "bg-purple-500" : "bg-gray-200"
              )}
            >
              <div
                className={cn(
                  "absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
                  conversation.needsModeration
                    ? "translate-x-4"
                    : "translate-x-0.5"
                )}
              />
            </div>
            <div className="flex-1 min-w-0">
              <p
                className={cn(
                  "text-xs font-medium",
                  conversation.needsModeration
                    ? "text-purple-700"
                    : "text-muted-foreground"
                )}
              >
                {conversation.needsModeration
                  ? "Mod\u00e9ration requise"
                  : "Pas de mod\u00e9ration"}
              </p>
              <p className="text-[10px] text-muted-foreground mt-0.5">
                {conversation.needsModeration
                  ? "Un mod\u00e9rateur doit valider"
                  : "Publication automatique"}
              </p>
            </div>
          </button>
        </div>

{/* Info */}
        <div>
          <div className="flex items-center gap-2 mb-2">
            <Clock className="h-3.5 w-3.5 text-muted-foreground" />
            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
              {"Informations"}
            </span>
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">{"Cr\u00e9\u00e9"}</span>
              <span className="text-foreground font-medium">
                Il y a {conversation.time}
              </span>
            </div>
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">Source</span>
              <span className="text-foreground font-medium">{sourceLabel}</span>
            </div>
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">Sentiment</span>
              <span
                className={cn(
                  "font-medium",
                  conversation.sentiment === "positive"
                    ? "text-green-600"
                    : conversation.sentiment === "negative"
                      ? "text-red-600"
                      : "text-gray-600"
                )}
              >
                {conversation.sentiment === "positive"
                  ? "Positif"
                  : conversation.sentiment === "negative"
                    ? "N\u00e9gatif"
                    : "Neutre"}
              </span>
            </div>
            <div className="flex items-center justify-between text-xs">
              <span className="text-muted-foreground">Tag</span>
              <span className="rounded-full bg-[#E8F4FD] px-2 py-0.5 text-[10px] font-medium text-[#1E88E5]">
                {conversation.tag}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messaging/message-detail.tsx"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import {
  Phone,
  Plus,
  X,
  ChevronLeft,
  ChevronRight,
  Sparkles,
  Paperclip,
  ArrowUp,
  Languages,
  ImageIcon,
  FileText,
  Loader2,
  ArrowLeft,
  Pen,
  Check,
  Globe,
  Copy,
  ExternalLink,
  ChevronDown,
  Shield,
  User,
  AlertTriangle,
  SlidersHorizontal,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import type { Conversation, Message, MessageState, Attachment, Urgency, Assignee } from "./messaging-layout"

interface MessageDetailProps {
  conversation: Conversation
  messages: Message[]
  state: MessageState
  onTraiterTicket: () => void
  onRepondre: () => void
  onSendMessage: (content: string, attachments: Attachment[]) => void
  onBack?: () => void
  onNext?: () => void
  onPrevious?: () => void
  currentIndex: number
  totalCount: number
  source?: string
  onUpdateConversation?: (id: string, updates: Partial<Pick<Conversation, "urgency" | "assignedTo" | "needsModeration">>) => void
  isPanelOpen?: boolean
  onTogglePanel?: () => void
}

const filterTabs = [
  { label: "Tous", count: 208, active: true },
  { label: "Intentions d'achat", count: 12, active: false },
  { label: "Avis Négatifs", count: 8, active: false },
  { label: "SAV", count: 6, active: false },
]

export function MessageDetail({
  conversation,
  messages,
  state,
  onTraiterTicket,
  onRepondre,
  onSendMessage,
  onBack,
  onNext,
  onPrevious,
  currentIndex = 1,
  totalCount = 12,
  source,
  onUpdateConversation,
}: MessageDetailProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const messagesContainerRef = useRef<HTMLDivElement>(null)
  const [isReplyAreaVisible, setIsReplyAreaVisible] = useState(false)
  const [isTranslating, setIsTranslating] = useState(false)
  const [isTranslated, setIsTranslated] = useState(false)
  const [autoGenerateOnOpen, setAutoGenerateOnOpen] = useState(false)

useEffect(() => {
    if (messagesContainerRef.current) {
      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight
    }
  }, [messages])

useEffect(() => {
    if (state === "processing" || state === "responded") {
      setIsReplyAreaVisible(true)
    } else if (state === "initial") {
      setIsReplyAreaVisible(false)
    }
  }, [state])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Don't trigger if user is typing in an input
      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return

if (e.key === "ArrowRight") {
        e.preventDefault()
        onNext?.()
      } else if (e.key === "ArrowLeft") {
        e.preventDefault()
        onPrevious?.()
      } else if (e.key === "Enter" && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
        e.preventDefault()
        if (state === "initial") {
          onTraiterTicket()
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [onNext, onPrevious, onTraiterTicket, state])

const handleTraiter = () => {
    if (source === "trustpilot") {
      setAutoGenerateOnOpen(true)
    }
    onTraiterTicket()
  }

return (
    <div className="flex min-h-0 w-full flex-1 flex-col bg-white">
      {/* Header */}
      <div className="shrink-0 sticky top-0 z-10 bg-white border-b border-border">
        {/* Back button row on mobile */}
        {onBack && (
          <div className="flex lg:hidden items-center gap-2 px-3 py-2 border-b border-border">
            <Button
              variant="ghost"
              size="sm"
              onClick={onBack}
              className="h-8 gap-1.5 px-2 text-gray-600 hover:text-gray-900"
            >
              <ArrowLeft className="h-4 w-4" />
              <span>Retour</span>
            </Button>
          </div>
        )}

{/* Filter tabs - hidden on mobile */}
        <div className="hidden lg:flex items-center gap-2 px-6 py-3 overflow-x-auto scrollbar-hide">
          {filterTabs.map((tab) => (
            <button
              key={tab.label}
              className={cn(
                "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap shrink-0",
                tab.active ? "bg-[#60A5FA] text-white" : "bg-[#F0F4F8] text-foreground hover:bg-[#E0E9F4]",
              )}
            >
              {tab.label}
              <span className={cn("text-xs", tab.active ? "text-white/80" : "text-muted-foreground")}>{tab.count}</span>
            </button>
          ))}
          <button className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#F0F4F8] text-muted-foreground hover:bg-[#E0E9F4]">
            <Plus className="h-4 w-4" />
          </button>
        </div>
      </div>

{/* Contact Header */}
      <div className="flex shrink-0 items-center justify-between border-b border-border px-3 lg:px-6 py-3 lg:py-4">
        <div className="flex items-center gap-2 lg:gap-3">
          <div className="flex h-8 w-8 lg:h-10 lg:w-10 items-center justify-center rounded-full bg-[#F0F4F8] text-xs lg:text-sm font-semibold text-foreground">
            {conversation.initials}
          </div>
          <span className="text-sm lg:text-lg font-semibold text-foreground">{conversation.name}</span>
        </div>
        <div className="flex items-center gap-2 lg:gap-4">
          <span className="hidden sm:flex items-center text-xs text-muted-foreground bg-[#F0F4F8] px-2 py-1 rounded-full">
            {currentIndex}/{totalCount}
          </span>
          <div className="flex items-center gap-1 lg:gap-2 text-muted-foreground">
            <Phone className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
            <span className="text-xs lg:text-sm hidden sm:block">07 88 67 35 20</span>
          </div>
        </div>
      </div>

{/* Messages Area */}
      <div ref={messagesContainerRef} className="min-h-0 flex-1 overflow-y-auto px-3 lg:px-6 py-3 lg:py-4">
        {/* Date */}
        <div className="mb-4 lg:mb-6 text-center">
          <span className="text-xs lg:text-sm text-muted-foreground">18 Sep 2026</span>
        </div>

{/* Ticket Properties Bar */}
        <TicketPropertiesBar
          conversation={conversation}
          onUpdateConversation={onUpdateConversation}
          isTranslating={isTranslating}
          isTranslated={isTranslated}
        />

{/* Messages */}
        <div className="space-y-3 lg:space-y-4">
          {messages.map((message) =>
            message.sender === "customer" ? (
              <CustomerMessage
                key={message.id}
                initials={message.initials}
                content={message.content}
                attachments={message.attachments}
              />
            ) : (
              <AgentMessage
                key={message.id}
                initials={message.initials}
                content={message.content}
                attachments={message.attachments}
                timestamp={message.timestamp}
              />
            ),
          )}
          <div ref={messagesEndRef} />
        </div>
      </div>

{/* Bottom Action Area */}
      <div className="shrink-0">
        {!isReplyAreaVisible && state === "initial" && (
          <TicketNavigationBar
            onPrevious={onPrevious}
            onNext={onNext}
            onTraiter={handleTraiter}
            currentIndex={currentIndex}
            totalCount={totalCount}
          />
        )}

<div
          className={cn(
            "transition-opacity duration-150 ease-out",
            isReplyAreaVisible ? "opacity-100" : "opacity-0 pointer-events-none absolute bottom-0 left-0 right-0",
          )}
        >
          {isReplyAreaVisible && (
            <ResponseArea
              onSendMessage={onSendMessage}
              onClose={() => {
                setIsReplyAreaVisible(false)
              }}
              showNavigation={true}
              onPrevious={onPrevious}
              onNext={onNext}
              state={state}
              source={source}
              autoGenerate={autoGenerateOnOpen}
              onAutoGenerateComplete={() => setAutoGenerateOnOpen(false)}
            />
          )}
        </div>
      </div>
    </div>
  )
}

const urgencyConfig: Record<Urgency, { label: string; color: string; bg: string; border: string }> = {
  basse: { label: "Basse", color: "text-gray-600", bg: "bg-gray-50", border: "border-gray-200" },
  moyenne: { label: "Moyenne", color: "text-amber-700", bg: "bg-amber-50", border: "border-amber-200" },
  haute: { label: "Haute", color: "text-orange-700", bg: "bg-orange-50", border: "border-orange-200" },
  critique: { label: "Critique", color: "text-red-700", bg: "bg-red-50", border: "border-red-200" },
}

const urgencyOptions: Urgency[] = ["basse", "moyenne", "haute", "critique"]
const assigneeOptions: Assignee[] = ["non-attribué", "Alexandre R.", "Marie D.", "Thomas L."]

function TicketPropertiesBar({
  conversation,
  onUpdateConversation,
  isTranslating,
  isTranslated,
}: {
  conversation: Conversation
  onUpdateConversation?: (id: string, updates: Partial<Pick<Conversation, "urgency" | "assignedTo" | "needsModeration">>) => void
  isTranslating: boolean
  isTranslated: boolean
}) {
  const [openDropdown, setOpenDropdown] = useState<"urgency" | "assignee" | null>(null)

const urg = urgencyConfig[conversation.urgency]

return (
    <div className="mb-4 lg:mb-6 flex flex-wrap items-center justify-center gap-2 lg:gap-2.5">
      {/* Tag */}
      <span className="rounded-full bg-[#E8F4FD] px-2 lg:px-3 py-0.5 lg:py-1 text-xs lg:text-sm font-medium text-[#1E88E5]">
        {conversation.tag}
      </span>

{/* Urgency Dropdown */}
      <div className="relative">
        <button
          onClick={() => setOpenDropdown(openDropdown === "urgency" ? null : "urgency")}
          className={cn(
            "flex items-center gap-1 lg:gap-1.5 rounded-lg border px-2 lg:px-2.5 py-1 lg:py-1.5 text-xs lg:text-sm font-medium transition-all",
            urg.bg, urg.color, urg.border,
            "hover:opacity-80"
          )}
        >
          <AlertTriangle className="h-3 w-3 lg:h-3.5 lg:w-3.5" />
          <span>{urg.label}</span>
          <ChevronDown className="h-3 w-3" />
        </button>
        {openDropdown === "urgency" && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setOpenDropdown(null)} />
            <div className="absolute top-full left-0 mt-1 z-20 rounded-lg border border-border bg-white shadow-lg py-1 min-w-[120px]">
              {urgencyOptions.map((u) => {
                const cfg = urgencyConfig[u]
                return (
                  <button
                    key={u}
                    onClick={() => {
                      onUpdateConversation?.(conversation.id, { urgency: u })
                      setOpenDropdown(null)
                    }}
                    className={cn(
                      "flex w-full items-center gap-2 px-3 py-1.5 text-xs lg:text-sm transition-colors hover:bg-gray-50",
                      conversation.urgency === u && "bg-gray-50 font-semibold"
                    )}
                  >
                    <span className={cn("h-2 w-2 rounded-full", u === "basse" ? "bg-gray-400" : u === "moyenne" ? "bg-amber-400" : u === "haute" ? "bg-orange-500" : "bg-red-500")} />
                    <span className={cfg.color}>{cfg.label}</span>
                  </button>
                )
              })}
            </div>
          </>
        )}
      </div>

{/* Assignee Dropdown */}
      <div className="relative">
        <button
          onClick={() => setOpenDropdown(openDropdown === "assignee" ? null : "assignee")}
          className={cn(
            "flex items-center gap-1 lg:gap-1.5 rounded-lg border px-2 lg:px-2.5 py-1 lg:py-1.5 text-xs lg:text-sm transition-all",
            conversation.assignedTo === "non-attribué"
              ? "border-border text-muted-foreground hover:bg-muted"
              : "border-blue-200 bg-blue-50 text-blue-700 hover:opacity-80"
          )}
        >
          <User className="h-3 w-3 lg:h-3.5 lg:w-3.5" />
          <span>{conversation.assignedTo === "non-attribué" ? "Non attribué" : conversation.assignedTo}</span>
          <ChevronDown className="h-3 w-3" />
        </button>
        {openDropdown === "assignee" && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setOpenDropdown(null)} />
            <div className="absolute top-full left-0 mt-1 z-20 rounded-lg border border-border bg-white shadow-lg py-1 min-w-[150px]">
              {assigneeOptions.map((a) => (
                <button
                  key={a}
                  onClick={() => {
                    onUpdateConversation?.(conversation.id, { assignedTo: a })
                    setOpenDropdown(null)
                  }}
                  className={cn(
                    "flex w-full items-center gap-2 px-3 py-1.5 text-xs lg:text-sm transition-colors hover:bg-gray-50",
                    conversation.assignedTo === a && "bg-gray-50 font-semibold"
                  )}
                >
                  <User className="h-3 w-3 text-muted-foreground" />
                  <span>{a === "non-attribué" ? "Non attribué" : a}</span>
                </button>
              ))}
            </div>
          </>
        )}
      </div>

{/* Moderation Toggle */}
      <button
        onClick={() => onUpdateConversation?.(conversation.id, { needsModeration: !conversation.needsModeration })}
        className={cn(
          "flex items-center gap-1 lg:gap-1.5 rounded-lg border px-2 lg:px-2.5 py-1 lg:py-1.5 text-xs lg:text-sm font-medium transition-all",
          conversation.needsModeration
            ? "border-purple-200 bg-purple-50 text-purple-700"
            : "border-border text-muted-foreground hover:bg-muted"
        )}
      >
        <Shield className="h-3 w-3 lg:h-3.5 lg:w-3.5" />
        <span className="hidden sm:inline">{conversation.needsModeration ? "Modération requise" : "Pas de modération"}</span>
        <span className="sm:hidden">{conversation.needsModeration ? "Modérer" : "Mod."}</span>
      </button>

{/* Translate Button */}
      <button
        onClick={() => {}}
        disabled={isTranslating}
        className={cn(
          "flex items-center gap-1 lg:gap-1.5 rounded-lg border px-2 lg:px-3 py-1 lg:py-1.5 text-xs lg:text-sm transition-all duration-300",
          isTranslated
            ? "border-green-300 bg-green-50 text-green-600"
            : isTranslating
              ? "border-[#60A5FA] bg-[#E8F4FD] text-[#60A5FA]"
              : "border-border text-muted-foreground hover:bg-muted hover:border-[#60A5FA] hover:text-[#60A5FA]",
        )}
      >
        {isTranslating ? (
          <Loader2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
        ) : isTranslated ? (
          <Check className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
        ) : (
          <Languages className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
        )}
        <span className="hidden sm:inline">
          {isTranslated ? "Traduit" : isTranslating ? "Traduction..." : "Traduire"}
        </span>
      </button>
    </div>
  )
}

function TicketNavigationBar({
  onPrevious,
  onNext,
  onTraiter,
  currentIndex,
  totalCount,
}: {
  onPrevious?: () => void
  onNext?: () => void
  onTraiter: () => void
  currentIndex: number
  totalCount: number
}) {
  return (
    <div className="border-t border-border bg-white px-3 lg:px-6 py-3 lg:py-4">
      {/* Main navigation row with new pastel colors */}
      <div className="flex items-center justify-center gap-2 lg:gap-3">
        <button
          onClick={onPrevious}
          className="flex items-center gap-2 h-10 lg:h-11 px-4 lg:px-5 border bg-[#FDE8E8] hover:bg-[#FCDADA] text-gray-700 transition-all border-transparent rounded-sm"
        >
          <ChevronLeft className="h-4 w-4" />
          <span className="text-sm font-extrabold">Précédent</span>
        </button>

<button
          onClick={onTraiter}
          className="flex items-center gap-2 h-10 lg:h-11 px-5 lg:px-6 border bg-[#FEF3C7] hover:bg-[#FDE68A] text-gray-700 transition-all border-card rounded-sm"
        >
          <Pen className="h-4 w-4" />
          <span className="text-sm font-extrabold">Traiter le ticket</span>
        </button>

<button
          onClick={onNext}
          className="flex items-center gap-2 h-10 lg:h-11 px-4 lg:px-5 border bg-[#E8F5E9] hover:bg-[#C8E6C9] text-gray-700 transition-all border-card rounded-sm"
        >
          <span className="text-sm font-extrabold">Suivant</span>
          <ChevronRight className="h-4 w-4" />
        </button>
      </div>

<div className="hidden lg:flex items-center justify-center gap-4 mt-3 text-[10px] text-muted-foreground">
        <span>
          <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-[10px]">→</kbd> Suivant
        </span>
        <span>
          <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-[10px]">←</kbd> Précédent
        </span>
        <span>
          <kbd className="px-1.5 py-0.5 bg-gray-100 rounded text-[10px]">Entrée</kbd> Traiter
        </span>
      </div>
    </div>
  )
}

function CustomerMessage({
  initials,
  content,
  attachments,
}: { initials: string; content: string; attachments?: Attachment[] }) {
  return (
    <div className="flex items-start gap-2 lg:gap-3">
      <div className="flex h-8 w-8 lg:h-10 lg:w-10 shrink-0 items-center justify-center rounded-full bg-[#F0F4F8] text-xs lg:text-sm font-semibold text-foreground">
        {initials}
      </div>
      <div className="max-w-[85%] lg:max-w-[80%]">
        <div className="rounded-2xl bg-[#FFEAE8] px-3 lg:px-4 py-2 lg:py-3">
          <p className="whitespace-pre-line text-xs lg:text-sm text-foreground">{content}</p>
        </div>
        {attachments && attachments.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-2">
            {attachments.map((attachment) => (
              <AttachmentPreview key={attachment.id} attachment={attachment} />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

function AttachmentPreview({ attachment }: { attachment: Attachment }) {
  if (attachment.type === "image") {
    return (
      <a href={attachment.url} target="_blank" rel="noopener noreferrer" className="block">
        <img
          src={attachment.url || "/placeholder.svg"}
          alt={attachment.name}
          className="h-20 w-20 lg:h-24 lg:w-24 rounded-lg object-cover border border-border hover:opacity-90 transition-opacity"
        />
      </a>
    )
  }

return (
    <a
      href={attachment.url}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center gap-2 rounded-lg border border-border bg-white px-2 lg:px-3 py-1.5 lg:py-2 hover:bg-muted transition-colors"
    >
      <FileText className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-muted-foreground" />
      <div className="flex flex-col">
        <span className="text-[10px] lg:text-xs font-medium text-foreground truncate max-w-[80px] lg:max-w-[120px]">
          {attachment.name}
        </span>
        {attachment.size && <span className="text-[10px] lg:text-xs text-muted-foreground">{attachment.size}</span>}
      </div>
    </a>
  )
}

function ResponseArea({
  onSendMessage,
  onClose,
  showNavigation,
  onPrevious,
  onNext,
  state,
  source,
  autoGenerate,
  onAutoGenerateComplete,
}: {
  onSendMessage: (content: string, attachments: Attachment[]) => void
  onClose?: () => void
  showNavigation?: boolean
  onPrevious?: () => void
  onNext?: () => void
  state?: MessageState
  source?: string
  autoGenerate?: boolean
  onAutoGenerateComplete?: () => void
}) {
  const [message, setMessage] = useState("")
  const [attachments, setAttachments] = useState<Attachment[]>([])
  const [isDragging, setIsDragging] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)
  const [isImproving, setIsImproving] = useState(false)
  const [isCorrecting, setIsCorrecting] = useState(false)
  const [isTranslatingResponse, setIsTranslatingResponse] = useState(false)
  const [aiActionType, setAiActionType] = useState<"generate" | "improve" | "correct" | "translate" | null>(null)
  const [displayedText, setDisplayedText] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isCopied, setIsCopied] = useState(false)
  const [isRedirecting, setIsRedirecting] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const imageInputRef = useRef<HTMLInputElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

const isTrustpilot = source === "trustpilot"

const adjustTextareaHeight = () => {
    const textarea = textareaRef.current
    if (!textarea) return
    textarea.style.height = "60px"
    const newHeight = Math.min(Math.max(textarea.scrollHeight, 60), 200)
    textarea.style.height = `${newHeight}px`
  }

useEffect(() => {
    adjustTextareaHeight()
  }, [message])

// Focus textarea when component mounts
  useEffect(() => {
    textareaRef.current?.focus()
  }, [])

const typeText = async (text: string) => {
    setIsTyping(true)
    setMessage("")
    const words = text.split(" ")
    let currentText = ""

for (let i = 0; i < words.length; i++) {
      currentText += (i === 0 ? "" : " ") + words[i]
      setMessage(currentText)
      // Variable delay for natural feel
      await new Promise((resolve) => setTimeout(resolve, 20 + Math.random() * 30))
    }
    setIsTyping(false)
  }

const handleGenerateResponse = async () => {
    setIsGenerating(true)
    setAiActionType("generate")

// Simulate AI thinking
    await new Promise((resolve) => setTimeout(resolve, 1000))

const generatedText = `Bonjour,

Je vous remercie pour votre message concernant votre commande #45821.

Je suis sincèrement désolé pour les désagréments rencontrés avec votre commande. Je comprends parfaitement votre frustration concernant le modèle différent et l'emballage endommagé.

Je vous propose les solutions suivantes :
1. Un échange gratuit avec le bon modèle
2. Un remboursement intégral sous 5 jours ouvrés

Pourriez-vous m'envoyer des photos du produit reçu et de l'emballage afin que je puisse traiter votre dossier rapidement ?

Je reste à votre disposition.

Cordialement,
L'équipe VoxTrend`

setIsGenerating(false)
    setAiActionType(null)
    await typeText(generatedText)
  }

const handleImproveResponse = async () => {
    if (!message.trim()) return
    setIsImproving(true)
    setAiActionType("improve")

await new Promise((resolve) => setTimeout(resolve, 1000))

const improvedText = `Bonjour,

Je vous remercie de nous avoir contactés au sujet de votre commande #45821.

Tout d'abord, je tiens à vous présenter nos sincères excuses pour cette expérience décevante.

Voici ce que je can offer you :

✓ Option 1 : Échange express gratuit
✓ Option 2 : Remboursement intégral sous 48h

Pour accélérer le traitement, pourriez-vous nous transmettre quelques photos ?

Bien cordialement,
L'équipe VoxTrend`

setIsImproving(false)
    setAiActionType(null)
    await typeText(improvedText)
  }

const handleCorrectSpelling = async () => {
    if (!message.trim()) return
    setIsCorrecting(true)
    setAiActionType("correct")

await new Promise((resolve) => setTimeout(resolve, 800))

const correctedText = message.replace(/\s+/g, " ").replace(/\s+\./g, ".").replace(/\s+,/g, ",").trim()

setIsCorrecting(false)
    setAiActionType(null)
    setMessage(correctedText)
  }

const handleTranslateResponse = async () => {
    if (!message.trim()) return
    setIsTranslatingResponse(true)
    setAiActionType("translate")

await new Promise((resolve) => setTimeout(resolve, 1200))

// Simulate translation from French to English (assuming customer message was in English)
    const translatedText = `Hello,

Thank you for your message regarding your order #45821.

First of all, I would like to sincerely apologize for this disappointing experience.

Here is what I can offer you:

✓ Option 1: Free express exchange
✓ Option 2: Full refund within 48 hours

To speed up the process, could you please send us some photos?

Best regards,
The VoxTrend Team`

setIsTranslatingResponse(false)
    setAiActionType(null)
    await typeText(translatedText)
  }

const handlePaste = (e: React.ClipboardEvent) => {
    const items = e.clipboardData.items
    const imageItems: File[] = []

for (let i = 0; i < items.length; i++) {
      const item = items[i]
      if (item.type.startsWith("image/")) {
        const file = item.getAsFile()
        if (file) {
          imageItems.push(file)
        }
      }
    }

if (imageItems.length > 0) {
      e.preventDefault()
      const newAttachments: Attachment[] = imageItems.map((file) => ({
        id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
        type: "image" as const,
        name: file.name || `image-${Date.now()}.png`,
        url: URL.createObjectURL(file),
        size: formatFileSize(file.size),
      }))
      setAttachments((prev) => [...prev, ...newAttachments])
    }
  }

const handleFileSelect = (files: FileList | null, type: "image" | "file") => {
    if (!files) return

const newAttachments: Attachment[] = Array.from(files).map((file) => ({
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      type: type === "image" || file.type.startsWith("image/") ? "image" : "file",
      name: file.name,
      url: URL.createObjectURL(file),
      size: formatFileSize(file.size),
    }))

setAttachments((prev) => [...prev, ...newAttachments])
  }

const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 B"
    const k = 1024
    const sizes = ["B", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i]
  }

const removeAttachment = (id: string) => {
    setAttachments((prev) => {
      const attachment = prev.find((a) => a.id === id)
      if (attachment) {
        URL.revokeObjectURL(attachment.url)
      }
      return prev.filter((a) => a.id !== id)
    })
  }

const handleSend = async () => {
    if (!message.trim() && attachments.length === 0) return

if (isTrustpilot) {
      // Copy to clipboard
      try {
        await navigator.clipboard.writeText(message)
        setIsCopied(true)

// Show copied state briefly then redirect
        setTimeout(() => {
          setIsRedirecting(true)
          // Redirect to Trustpilot after a brief delay
          setTimeout(() => {
            window.open("https://business.trustpilot.com/reviews", "_blank")
            setIsCopied(false)
            setIsRedirecting(false)
            // Call original send to update UI
            onSendMessage(message, attachments)
            setMessage("")
            setAttachments([])
          }, 500)
        }, 1000)
      } catch (err) {
        console.error("Failed to copy:", err)
        // Fallback: just redirect
        window.open("https://business.trustpilot.com/reviews", "_blank")
        onSendMessage(message, attachments)
        setMessage("")
        setAttachments([])
      }
    } else {
      onSendMessage(message, attachments)
      setMessage("")
      setAttachments([])
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    handleFileSelect(e.dataTransfer.files, "file")
  }

const isAnyAIActionInProgress = isGenerating || isImproving || isCorrecting || isTyping || isTranslatingResponse

useEffect(() => {
    if (autoGenerate && isTrustpilot && !isGenerating && !message) {
      handleGenerateResponse()
      onAutoGenerateComplete?.()
    }
  }, [autoGenerate, isTrustpilot])

return (
    <div className="border-t border-border bg-white px-3 lg:px-6 py-2 lg:py-3">
      <div
        className={cn(
          "relative rounded-xl border bg-white transition-all duration-300",
          isDragging ? "border-[#60A5FA] bg-[#E8F4FD]/50" : "border-border",
          isAnyAIActionInProgress && "border-[#60A5FA] shadow-[0_0_20px_rgba(96,165,250,0.2)]",
        )}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
      >
        {attachments.length > 0 && (
          <div className="px-2 lg:px-3 pt-2 lg:pt-3 flex flex-wrap gap-2">
            {attachments.map((attachment) => (
              <div key={attachment.id} className="group relative">
                {attachment.type === "image" ? (
                  <div className="relative">
                    <img
                      src={attachment.url || "/placeholder.svg"}
                      alt={attachment.name}
                      className="h-12 w-12 lg:h-14 lg:w-14 rounded-lg object-cover border border-border"
                    />
                    <button
                      onClick={() => removeAttachment(attachment.id)}
                      className="absolute -right-1.5 -top-1.5 flex h-4 w-4 lg:h-5 lg:w-5 items-center justify-center rounded-full bg-red-500 text-white opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <X className="h-2.5 w-2.5 lg:h-3 lg:w-3" />
                    </button>
                  </div>
                ) : (
                  <div className="relative flex items-center gap-2 rounded-lg border border-border bg-[#F0F4F8] px-2 py-1 lg:px-2.5 lg:py-1.5">
                    <FileText className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-muted-foreground" />
                    <span className="text-[10px] lg:text-xs font-medium text-foreground truncate max-w-[60px] lg:max-w-[80px]">
                      {attachment.name}
                    </span>
                    <button
                      onClick={() => removeAttachment(attachment.id)}
                      className="ml-1 text-muted-foreground hover:text-red-500 transition-colors"
                    >
                      <X className="h-2.5 w-2.5 lg:h-3 lg:w-3" />
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

{(isGenerating || isImproving || isCorrecting || isTranslatingResponse) && (
          <div className="mx-2 lg:mx-3 mt-2 lg:mt-3 flex items-center gap-2 lg:gap-3 rounded-lg bg-gradient-to-r from-[#E8F4FD] to-[#EEF2FF] px-3 lg:px-4 py-2 lg:py-2.5 animate-pulse">
            <div className="relative flex items-center justify-center">
              <div className="h-5 w-5 lg:h-6 lg:w-6 rounded-full border-2 border-[#60A5FA]/30 border-t-[#60A5FA] animate-spin" />
            </div>
            <div className="flex flex-col">
              <span className="text-xs lg:text-sm font-medium text-[#60A5FA]">
                {aiActionType === "generate" && "Génération de la réponse..."}
                {aiActionType === "improve" && "Amélioration en cours..."}
                {aiActionType === "correct" && "Correction orthographique..."}
                {aiActionType === "translate" && "Traduction en cours..."}
              </span>
              <span className="text-[10px] text-[#60A5FA]/70">Veuillez patienter quelques instants</span>
            </div>
          </div>
        )}

{isTyping && (
          <div className="mx-2 lg:mx-3 mt-2 flex items-center gap-2">
            <div className="flex gap-1">
              <span
                className="h-1.5 w-1.5 rounded-full bg-[#60A5FA] animate-bounce"
                style={{ animationDelay: "0ms" }}
              />
              <span
                className="h-1.5 w-1.5 rounded-full bg-[#60A5FA] animate-bounce"
                style={{ animationDelay: "150ms" }}
              />
              <span
                className="h-1.5 w-1.5 rounded-full bg-[#60A5FA] animate-bounce"
                style={{ animationDelay: "300ms" }}
              />
            </div>
            <span className="text-xs text-[#60A5FA]">Rédaction en cours...</span>
          </div>
        )}

<textarea
          ref={textareaRef}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          onKeyDown={handleKeyDown}
          onPaste={handlePaste}
          placeholder="Écrivez votre réponse... Utilisez '/' pour insérer des réponses sauvegardées"
          className={cn(
            "w-full resize-none bg-transparent px-3 lg:px-4 py-2.5 lg:py-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none transition-opacity",
            isTyping && "text-[#60A5FA]",
          )}
          style={{ height: "60px", minHeight: "60px", maxHeight: "200px" }}
          disabled={isGenerating || isImproving || isCorrecting || isTranslatingResponse}
        />

<div className="flex items-center justify-between px-2 lg:px-3 pb-2 lg:pb-3">
          <div className="flex items-center gap-2 lg:gap-3">
            {!isTrustpilot && (
              <>
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple
                  accept=".pdf,.doc,.docx,.txt,.xls,.xlsx"
                  onChange={(e) => handleFileSelect(e.target.files, "file")}
                  className="hidden"
                />
                <input
                  ref={imageInputRef}
                  type="file"
                  multiple
                  accept="image/*"
                  onChange={(e) => handleFileSelect(e.target.files, "image")}
                  className="hidden"
                />
                <button
                  onClick={() => fileInputRef.current?.click()}
                  disabled={isAnyAIActionInProgress}
                  className="p-1.5 lg:p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50"
                >
                  <Paperclip className="h-4 w-4 lg:h-5 lg:w-5" />
                </button>
                <button
                  onClick={() => imageInputRef.current?.click()}
                  disabled={isAnyAIActionInProgress}
                  className="p-1.5 lg:p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50"
                >
                  <ImageIcon className="h-4 w-4 lg:h-5 lg:w-5" />
                </button>

<div className="h-5 w-px bg-gray-200 mx-1 lg:mx-2" />
              </>
            )}

<button
              onClick={handleGenerateResponse}
              disabled={isAnyAIActionInProgress}
              className={cn(
                "flex items-center gap-1.5 px-2 lg:px-3 py-1.5 rounded-lg transition-all text-xs lg:text-sm",
                isGenerating
                  ? "bg-[#60A5FA] text-white"
                  : "text-muted-foreground hover:text-[#60A5FA] hover:bg-[#60A5FA]/10 disabled:opacity-50",
              )}
            >
              {isGenerating ? (
                <Loader2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
              ) : (
                <Sparkles className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
              )}
              <span className="hidden sm:inline">Générer</span>
            </button>
            <button
              onClick={handleCorrectSpelling}
              disabled={isAnyAIActionInProgress || !message.trim()}
              className={cn(
                "flex items-center gap-1.5 px-2 lg:px-3 py-1.5 rounded-lg transition-all text-xs lg:text-sm",
                isCorrecting
                  ? "bg-[#60A5FA] text-white"
                  : "text-muted-foreground hover:text-[#60A5FA] hover:bg-[#60A5FA]/10 disabled:opacity-50",
              )}
            >
              {isCorrecting ? (
                <Loader2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
              ) : (
                <Sparkles className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
              )}
              <span className="hidden sm:inline">Corriger</span>
            </button>
            <button
              onClick={handleImproveResponse}
              disabled={isAnyAIActionInProgress || !message.trim()}
              className={cn(
                "flex items-center gap-1.5 px-2 lg:px-3 py-1.5 rounded-lg transition-all text-xs lg:text-sm",
                isImproving
                  ? "bg-[#60A5FA] text-white"
                  : "text-muted-foreground hover:text-[#60A5FA] hover:bg-[#60A5FA]/10 disabled:opacity-50",
              )}
            >
              {isImproving ? (
                <Loader2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
              ) : (
                <Sparkles className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
              )}
              <span className="hidden sm:inline">Améliorer</span>
            </button>
            <button
              onClick={handleTranslateResponse}
              disabled={isAnyAIActionInProgress || !message.trim()}
              className={cn(
                "flex items-center gap-1.5 px-2 lg:px-3 py-1.5 rounded-lg transition-all text-xs lg:text-sm",
                isTranslatingResponse
                  ? "bg-[#10B981] text-white"
                  : "text-[#10B981] hover:bg-[#10B981]/10 disabled:opacity-50",
              )}
            >
              {isTranslatingResponse ? (
                <Loader2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
              ) : (
                <Globe className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
              )}
              <span className="hidden sm:inline">Traduire</span>
            </button>
          </div>

{/* Modified send button for Trustpilot workflow with copy/redirect */}
          <button
            onClick={handleSend}
            disabled={isAnyAIActionInProgress || (!message.trim() && attachments.length === 0)}
            className={cn(
              "flex items-center justify-center gap-2 transition-all",
              isTrustpilot ? "h-9 lg:h-10 px-4 rounded-full" : "h-8 w-8 lg:h-9 lg:w-9 rounded-full",
              message.trim() || attachments.length > 0
                ? isTrustpilot
                  ? isCopied
                    ? "bg-green-500 text-white"
                    : isRedirecting
                      ? "bg-orange-500 text-white"
                      : "bg-[#00B67A] text-white hover:bg-[#00A06A]"
                  : "bg-[#60A5FA] text-white hover:bg-[#3B82F6]"
                : "bg-[#F0F4F8] text-muted-foreground",
            )}
          >
            {isTrustpilot ? (
              isCopied ? (
                <>
                  <Check className="h-4 w-4" />
                  <span className="text-sm font-medium">Copié !</span>
                </>
              ) : isRedirecting ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  <span className="text-sm font-medium">Redirection...</span>
                </>
              ) : (
                <>
                  <Copy className="h-4 w-4" />
                  <span className="text-sm font-medium">Copier & Ouvrir Trustpilot</span>
                  <ExternalLink className="h-3 w-3 ml-1" />
                </>
              )
            ) : (
              <ArrowUp className="h-4 w-4 lg:h-5 lg:w-5" />
            )}
          </button>
        </div>
      </div>

{/* Navigation when in reply mode */}
      {showNavigation && (
        <div className="flex items-center justify-center gap-2 lg:gap-3 mt-3 pt-3 border-t border-border">
          <button
            onClick={onPrevious}
            className="flex items-center gap-2 h-9 px-3 lg:px-4 rounded-full border border-gray-200 bg-[#FDE8E8] hover:bg-[#FCDADA] text-gray-700 transition-all"
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="text-sm">Précédent</span>
          </button>

<button
            onClick={onNext}
            className="flex items-center gap-2 h-9 px-3 lg:px-4 rounded-full border border-gray-200 bg-[#E8F5E9] hover:bg-[#C8E6C9] text-gray-700 transition-all"
          >
            <span className="text-sm">Suivant</span>
            <ChevronRight className="h-4 w-4" />
          </button>
        </div>
      )}
    </div>
  )
}</article></body></html>