
import React from 'react';
import { Helmet } from 'react-helmet';
import { User, Mail, Phone, Building, Camera, Save } from 'lucide-react';
import PrimaryButton from '@/components/PrimaryButton';
import SmartForm from '@/components/SmartForm';
import { z } from 'zod';
import { toast } from '@/components/ui/use-toast';
import { motion } from 'framer-motion';

const profileSchema = z.object({
  firstName: z.string().min(2, "Le prénom est requis"),
  lastName: z.string().min(2, "Le nom est requis"),
  email: z.string().email("Email invalide"),
  phone: z.string().optional(),
  department: z.string().optional(),
  signature: z.string().optional()
});

const UserProfilePage = () => {
  const handleSave = (data) => {
    console.log('Profile saved:', data);
    toast({ title: "Profil mis à jour", description: "Vos modifications ont été enregistrées avec succès." });
  };

  return (
    <>
      <Helmet>
        <title>Mon Profil - Bijou ERP</title>
      </Helmet>

      <div className="max-w-4xl mx-auto space-y-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Mon Profil</h1>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Sidebar Card */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            className="md:col-span-1 space-y-6"
          >
            <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 flex flex-col items-center text-center">
              <div className="relative mb-4 group cursor-pointer">
                <div className="w-32 h-32 rounded-full bg-[#941403] text-white flex items-center justify-center text-3xl font-bold overflow-hidden">
                  JD
                </div>
                <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                  <Camera className="w-8 h-8 text-white" />
                </div>
              </div>
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">Jean Dupont</h2>
              <p className="text-sm text-gray-500 dark:text-gray-400">Administrateur</p>

              <div className="w-full mt-6 pt-6 border-t border-gray-100 dark:border-gray-800 space-y-3 text-left">
                <div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
                  <Mail className="w-4 h-4" /> jean.dupont@bijou.com
                </div>
                <div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
                  <Phone className="w-4 h-4" /> +33 6 12 34 56 78
                </div>
                <div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300">
                  <Building className="w-4 h-4" /> Direction
                </div>
              </div>
            </div>
          </motion.div>

          {/* Form Card */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="md:col-span-2"
          >
            <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-6">
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Informations personnelles</h3>
                <p className="text-sm text-gray-500 dark:text-gray-400">Mettez à jour vos coordonnées et préférences.</p>
              </div>

              <SmartForm
                schema={profileSchema}
                defaultValues={{
                  firstName: 'Jean',
                  lastName: 'Dupont',
                  email: 'jean.dupont@bijou.com',
                  phone: '+33 6 12 34 56 78',
                  department: 'Direction',
                  signature: 'Jean Dupont\nCEO - Bijou ERP'
                }}
                onSubmit={handleSave}
                submitLabel="Enregistrer les modifications"
                fields={[
                  { title: 'Identité', type: 'section' },
                  { name: 'firstName', label: 'Prénom' },
                  { name: 'lastName', label: 'Nom' },
                  { name: 'email', label: 'Email professionnel', type: 'email' },
                  { name: 'phone', label: 'Téléphone mobile' },
                  { title: 'Entreprise', type: 'section' },
                  { name: 'department', label: 'Département', type: 'select', options: [{ value: 'Direction', label: 'Direction' }, { value: 'Ventes', label: 'Ventes' }, { value: 'SAV', label: 'SAV' }] },
                  { name: 'signature', label: 'Signature email', type: 'textarea', rows: 3, fullWidth: true },
                ]}
              />
            </div>
          </motion.div>
        </div>
      </div>
    </>
  );
};

export default UserProfilePage;
