'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';

const ROLE_TRANSLATIONS: Record<string, string> = {
  superadmin: 'Superadmin',
  admin: 'Administrador',
  autoridad: 'Autoridad',
  manager: 'Gerente',
  user: 'Usuario',
  producers: 'Productor',
  organization: 'Organización',
  coordinators: 'Coordinador',
};

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

  const { data } = useUserByProfile();

  const userRole = data?.data.role as string;
  const translatedRole = ROLE_TRANSLATIONS[userRole] || userRole || 'Sin Rol';

  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>{translatedRole}</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>
  );
}