"use client";

import { useState } from "react";

import { Lock, Mail, Save, User } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import { useSession } from "@/lib/auth/auth-client";

export default function PerfilPage() {
  const { data: session } = useSession();
  const [isEditingName, setIsEditingName] = useState(false);
  const [isEditingPassword, setIsEditingPassword] = useState(false);

  if (!session) {
    return (
      <div className="flex h-96 items-center justify-center">
        <p className="text-slate-500">Cargando...</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-slate-900">Mi Perfil</h1>
        <p className="text-slate-600">
          Gestiona tu información personal y configuración de cuenta
        </p>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Profile Card */}
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="text-base">Información del Usuario</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col items-center space-y-4">
              <div className="flex h-24 w-24 items-center justify-center rounded-full bg-blue-500 text-3xl font-bold text-white">
                {session.user.name
                  ?.split(" ")
                  .map((n) => n[0])
                  .join("")
                  .toUpperCase() || "U"}
              </div>
              <div className="text-center">
                <h3 className="text-lg font-semibold text-slate-900">
                  {session.user.name || "Usuario"}
                </h3>
                <p className="text-sm text-slate-500">{session.user.email}</p>
                <div className="mt-2">
                  <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
                    {(session.user as { role?: string }).role ?? "user"}
                  </span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Edit Forms */}
        <div className="space-y-6 lg:col-span-2">
          {/* Name Edit Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <User className="h-4 w-4" />
                Nombre
              </CardTitle>
            </CardHeader>
            <CardContent>
              {!isEditingName ? (
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium text-slate-900">
                      {session.user.name || "Sin nombre"}
                    </p>
                    <p className="text-sm text-slate-500">
                      Tu nombre se muestra en tu perfil y en los comentarios
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setIsEditingName(true)}
                  >
                    Editar
                  </Button>
                </div>
              ) : (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="name">Nombre completo</Label>
                    <Input
                      id="name"
                      defaultValue={session.user.name || ""}
                      placeholder="Ingresa tu nombre completo"
                    />
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" className="flex items-center gap-2">
                      <Save className="h-4 w-4" />
                      Guardar
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setIsEditingName(false)}
                    >
                      Cancelar
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* Email Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <Mail className="h-4 w-4" />
                Email
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-slate-900">
                    {session.user.email}
                  </p>
                  <p className="text-sm text-slate-500">
                    Tu dirección de email para iniciar sesión
                  </p>
                </div>
                <Button variant="outline" size="sm" disabled>
                  No editable
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Password Card */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-base">
                <Lock className="h-4 w-4" />
                Contraseña
              </CardTitle>
            </CardHeader>
            <CardContent>
              {!isEditingPassword ? (
                <div className="flex items-center justify-between">
                  <div>
                    <p className="font-medium text-slate-900">••••••••</p>
                    <p className="text-sm text-slate-500">
                      Última actualización hace 30 días
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setIsEditingPassword(true)}
                  >
                    Cambiar
                  </Button>
                </div>
              ) : (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="current-password">Contraseña actual</Label>
                    <Input
                      id="current-password"
                      type="password"
                      placeholder="Ingresa tu contraseña actual"
                    />
                  </div>
                  <div>
                    <Label htmlFor="new-password">Nueva contraseña</Label>
                    <Input
                      id="new-password"
                      type="password"
                      placeholder="Ingresa tu nueva contraseña"
                    />
                  </div>
                  <div>
                    <Label htmlFor="confirm-password">
                      Confirmar nueva contraseña
                    </Label>
                    <Input
                      id="confirm-password"
                      type="password"
                      placeholder="Confirma tu nueva contraseña"
                    />
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" className="flex items-center gap-2">
                      <Save className="h-4 w-4" />
                      Actualizar contraseña
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setIsEditingPassword(false)}
                    >
                      Cancelar
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}