"use client";

import React, { useState } from 'react';
import { UserInfo } from '@/types/chat';
import Image from 'next/image';

interface UserProfileFormProps {
  onSubmit: (userInfo: UserInfo) => void;
  theme?: 'light' | 'dark';
  bgColor?: string;
  textColor?: string;
}

const DEFAULT_PROFILE_IMAGE = '/image/profile.png';

const UserProfileForm: React.FC<UserProfileFormProps> = ({ 
  onSubmit, 
  theme = 'light',
  bgColor,
  textColor
}) => {
  const [username, setUsername] = useState('');
  const [profileImage, setProfileImage] = useState(DEFAULT_PROFILE_IMAGE);
  const [error, setError] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!username.trim()) {
      setError('Please enter your name');
      return;
    }
    
    onSubmit({
      username: username.trim(),
      profile_image: profileImage
    });
  };

  const isDark = theme === 'dark';
  const bgClass = isDark ? 'bg-gray-900' : 'bg-white';
  const textClass = isDark ? 'text-white' : 'text-gray-800';
  const borderClass = isDark ? 'border-gray-700' : 'border-gray-200';
  const inputBgClass = isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-100 border-transparent';
  const inputTextClass = isDark ? 'text-white' : 'text-gray-800';

  return (
    <div 
      className={`w-full max-w-md p-6 rounded-lg shadow-md border ${bgColor ? '' : `${bgClass} ${borderClass}`} ${textColor ? '' : textClass}`}
      style={{
        backgroundColor: bgColor || '',
        color: textColor || ''
      }}
    >
      <h2 className="text-xl font-semibold mb-6 text-center">Enter Your Information</h2>
      
      <form onSubmit={handleSubmit}>
        <div className="mb-6 flex justify-center">
          <div className="relative w-24 h-24 rounded-full overflow-hidden border-2 border-blue-500">
            <Image
              src={profileImage}
              alt="Profile"
              fill
              className="object-cover"
            />
          </div>
        </div>
        
        <div className="mb-4">
          <label htmlFor="username" className="block text-sm font-medium mb-1">
            Your Name
          </label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => {
              setUsername(e.target.value);
              setError('');
            }}
            placeholder="Enter your name"
            className={`w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
              inputBgClass
            } ${inputTextClass}`}
          />
          {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
        </div>
        
        <div className="mb-6">
          <label htmlFor="profileImage" className="block text-sm font-medium mb-1">
            Profile Image URL (Optional)
          </label>
          <input
            type="text"
            id="profileImage"
            value={profileImage === DEFAULT_PROFILE_IMAGE ? '' : profileImage}
            onChange={(e) => setProfileImage(e.target.value || DEFAULT_PROFILE_IMAGE)}
            placeholder="https://example.com/your-image.jpg"
            className={`w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${
              inputBgClass
            } ${inputTextClass}`}
          />
          <p className="mt-1 text-xs opacity-70">
            Leave empty to use default avatar
          </p>
        </div>
        
        <button
          type="submit"
          className="w-full py-2 px-4 bg-blue-500 text-white font-medium rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
        >
          Join Chat
        </button>
      </form>
    </div>
  );
};

export default UserProfileForm;