"use client";

import { Edit2, Copy, LogOut } from "lucide-react";
import { useState } from "react";

export default function ProfilePage() {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="p-6 max-w-3xl mx-auto">
      {/* Header */}
      <div className="mb-8 flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold mb-2">My Profile</h1>
          <p className="text-gray-600">Manage your account</p>
        </div>
        <button
          onClick={() => setIsEditing(!isEditing)}
          className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition"
        >
          <Edit2 className="w-4 h-4" />
          {isEditing ? "Done" : "Edit"}
        </button>
      </div>

      {/* Profile Card */}
      <div className="bg-white border border-gray-200 rounded-xl p-8 space-y-8 mb-8">
        {/* Avatar & Basic Info */}
        <div className="flex items-start gap-6">
          <img
            src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
            alt="Profile"
            className="w-24 h-24 rounded-xl"
          />
          <div className="flex-1 space-y-4">
            <div>
              <label className="text-sm font-semibold text-gray-600">Name</label>
              <input
                type="text"
                defaultValue="John Doe"
                disabled={!isEditing}
                className="w-full px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition"
              />
            </div>
            <div>
              <label className="text-sm font-semibold text-gray-600">Handle</label>
              <div className="flex gap-2">
                <input
                  type="text"
                  defaultValue="@johndoe"
                  disabled={!isEditing}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition"
                />
                {isEditing && (
                  <button className="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
                    <Copy className="w-4 h-4" />
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Email */}
        <div className="border-t border-gray-200 pt-6">
          <label className="text-sm font-semibold text-gray-600">Email</label>
          <input
            type="email"
            defaultValue="john@example.com"
            disabled
            className="w-full px-4 py-2 border border-gray-200 rounded-lg bg-gray-50 focus:outline-none mt-2"
          />
          <p className="text-xs text-gray-500 mt-2">Connected via Google OAuth</p>
        </div>

        {/* Bio */}
        <div className="border-t border-gray-200 pt-6">
          <label className="text-sm font-semibold text-gray-600">Bio</label>
          <textarea
            defaultValue="AI enthusiast and roleplay lover"
            disabled={!isEditing}
            rows={3}
            className="w-full px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition resize-none mt-2"
          />
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-4 mb-8">
        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
          <div className="text-2xl font-bold">12</div>
          <p className="text-sm text-gray-600 mt-2">Favorite Characters</p>
        </div>
        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
          <div className="text-2xl font-bold">48</div>
          <p className="text-sm text-gray-600 mt-2">Conversations</p>
        </div>
        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
          <div className="text-2xl font-bold">325</div>
          <p className="text-sm text-gray-600 mt-2">Messages</p>
        </div>
      </div>

      {/* Account Settings */}
      <div className="bg-white border border-gray-200 rounded-xl p-8 space-y-4">
        <h3 className="text-lg font-semibold mb-4">Account Settings</h3>
        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
          Change Password
        </button>
        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
          Two-Factor Authentication
        </button>
        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
          Privacy Settings
        </button>
      </div>

      {/* Logout */}
      <button className="mt-8 w-full px-4 py-3 flex items-center justify-center gap-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
        <LogOut className="w-5 h-5" />
        Logout
      </button>
    </div>
  );
}