'use client';
import { useUserByProfile } from '@/feactures/users/hooks/use-query-users';
import { Button } from '@repo/shadcn/button';
import { Edit2 } from 'lucide-react';
import { useState } from 'react';
import { AccountPlanModal } from './modal-profile';

export function Profile() {
  const [open, setOpen] = useState(false);

  const { data } = useUserByProfile();

  // console.log("🎯 data:", data);

  return (
    <div>
      <Button onClick={() => setOpen(true)} size="sm">
        <Edit2 className="mr-2 h-4 w-4" /> Editar Perfil
      </Button>

      <AccountPlanModal open={open} onOpenChange={setOpen} defaultValues={data?.data}/>
      
      <h2 className='mt-3 mb-1'>Datos del usuario</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 ">
        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Usuario:</p>
          <p>{data?.data.username || 'Sin Nombre de Usuario'}</p>
        </section>

        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Rol:</p>
          <p>{data?.data.role || 'Sin Rol'}</p>
        </section>
      </div>
      
      <h2 className='mt-3 mb-1'>Información personal</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Nombre completo:</p>
          <p>{data?.data.fullname || 'Sin nombre y apellido'}</p>
        </section>

        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Correo:</p>
          <p>{data?.data.email || 'Sin correo'}</p>
        </section>

        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Teléfono:</p>
          <p>{data?.data.phone || 'Sin teléfono'}</p>
        </section>
      </div>

      <h2 className='mt-3 mb-1'>Información de ubicación</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Estado:</p>
          <p>{data?.data.state || 'Sin Estado'}</p>
        </section>

        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Municipio:</p>
          <p>{data?.data.municipality || 'Sin Municipio'}</p>
        </section>

        <section className='border bg-neutral-200 dark:bg-neutral-800 p-2 rounded-md'>
          <p className='font-bold text-lg'>Parroquia:</p>
          <p>{data?.data.parish || 'Sin Parroquia'}</p>
        </section>
      </div>

    </div>
  );
}