"use client"

import type React from "react"
import { Button } from "@/Components/ui/button"
import { Link, usePage } from "@inertiajs/react"
import { Mail, MapPin, Settings, Send, User, FileText, Briefcase } from "lucide-react"
import { useState, useEffect } from "react"

interface ProfileSectionProps {
  user: {
    name: string
    email: string
    city: string
  }
  setUser: React.Dispatch<
    React.SetStateAction<{
      nom: string
      email: string
      city: string
    }>
  >
}

export default function ProfileSection({ user, setUser }: ProfileSectionProps) {
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    setIsLoaded(true)
  }, [])

  return (
    <section className="w-full flex justify-center mt-28 sm:mt-32 md:mt-36 mb-6 sm:mb-8 px-4">
      <div className="w-full max-w-[76rem] mx-auto">
        {/* Main card with gradient background */}
        <div className="relative bg-[#0f172a] rounded-xl sm:rounded-2xl shadow-md overflow-hidden">
          <div className="relative z-10 w-full h-full py-6 sm:py-8">
            {/* Container that stacks on mobile, side-by-side on tablet+ */}
            <div className="flex flex-col sm:flex-row w-full items-start sm:items-stretch">
              {/* Left half: User information */}
              <div className="w-full sm:w-1/2 flex flex-col items-start px-4 sm:px-6 mb-6 sm:mb-0">
                <div className="p-5 w-full max-w-sm shadow-lg flex flex-col h-auto">
                  <div className="flex flex-col">
                    {/* User info section with image */}
                    <div className="flex">
                      {/* Left column for image */}
                      <div className="flex-shrink-0 mr-4">
                        <div className="w-16 h-16 sm:w-20 sm:h-20 bg-white/10 rounded-full overflow-hidden">
                          <img
                            src="/profile.jpg"
                            alt="Profile"
                            className="w-full h-full object-cover"
                          />
                        </div>
                      </div>

                      {/* Right column for text */}
                      <div className="flex flex-col">
                        <h1 className="text-white text-xl font-bold">{user.name}</h1>
                        <div className="flex items-center text-white/80 text-base mb-2">
                          <Mail className="w-4 h-4 mr-1.5" />
                          {user.email}
                        </div>
                        <div className="flex items-center text-white/80 text-base">
                          <MapPin className="w-4 h-4 mr-1.5" />
                          {user.city}
                        </div>
                      </div>
                    </div>

                    {/* Settings button - now left aligned with the image */}
                    <div className="flex mt-4">
                      <Link href="/profile" className="w-full">
                        <Button
                          variant="outline"
                          className="h-12 rounded-md bg-white/10 border-white/20 hover:bg-white/20 text-white flex items-center justify-center font-medium w-full"
                        >
                          <Settings className="w-5 h-5 mr-2" />
                          Modifier mon profile
                        </Button>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>

              {/* Right half: Action buttons only */}
              <div className="w-full sm:w-1/2 flex flex-col items-end px-4 sm:px-6">
                <div className="bg-white/5 rounded-xl p-5 w-full max-w-sm border border-white/10 shadow-lg flex flex-col h-auto">
                  <div className="flex flex-col">
                    {/* Content section */}
                    <div className="flex">
                      {/* Left column for icon */}
                      <div className="flex-shrink-0 mr-4">
                        <div className="flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-[#457B9D]/20">
                          <Send className="w-8 h-8 text-[#457B9D]" />
                        </div>
                      </div>

                      {/* Right column for text */}
                      <div className="flex flex-col">
                        <h3 className="text-white text-xl font-bold">Besoin d'assistance?</h3>
                        <p className="text-white/80 text-base mt-1">
                          Notre équipe est prête à vous aider avec vos questions
                        </p>
                      </div>
                    </div>

                    {/* Ticket button - now centered */}
                    <div className="flex justify-center mt-4">
                      <Link href="/client/ticket/create" className="w-3/4">
                        <Button className="h-12 bg-[#457B9D] hover:bg-[#3D6E8C] text-white font-medium rounded-md flex items-center justify-center gap-2 px-4 w-full transition-all duration-200 shadow-md hover:shadow-xl">
                          <Send className="w-5 h-5" />
                          <span className="inline">Envoyer un Ticket</span>
                        </Button>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}