"use client";

import React from 'react';
import { Profile } from './ProfilesProvider';
import { FiUser, FiMail, FiEdit, FiUserCheck, FiUsers } from 'react-icons/fi';
import { FaDiscord } from 'react-icons/fa';

interface ProfileDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (profile: Partial<Profile>) => void;
  onDelete: (id: string) => void;
  profile?: Profile;
}

export default function ProfileDialog({
  isOpen,
  onClose,
  onSave,
  onDelete,
  profile,
}: ProfileDialogProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const data = Object.fromEntries(formData.entries());
    
    onSave({
      first_name: data.first_name as string,
      last_name: data.last_name as string,
      email: data.email as string,
      discord_id: data.discord_id as string,
      role: data.role as string,
    });
    onClose();
  };

  if (!isOpen) return null;

  return (
    <dialog className="modal modal-open">
      <div className="modal-box w-11/12 max-w-2xl bg-white p-0 flex flex-col max-h-[90vh]">
        <h3 className="font-bold text-xl flex items-center gap-2 bg-white p-6 border-b sticky top-0">
          {profile?.id ? (
            <>
              <FiEdit className="w-5 h-5" />
              Редактиране на профил
            </>
          ) : (
            <>
              <FiUsers className="w-5 h-5" />
              Нов профил
            </>
          )}
        </h3>

        <form onSubmit={handleSubmit} className="flex flex-col flex-1">
          <div className="space-y-6 p-6 overflow-y-auto flex-1">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Име</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiUser className="w-4 h-4 opacity-70" />
                    <input
                      type="text"
                      name="first_name"
                      defaultValue={profile?.first_name || ''}
                      className="grow"
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Фамилия</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiUser className="w-4 h-4 opacity-70" />
                    <input
                      type="text"
                      name="last_name"
                      defaultValue={profile?.last_name || ''}
                      className="grow"
                    />
                  </label>
                </div>
                
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Discord ID</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FaDiscord className="w-4 h-4 opacity-70" />
                    <input
                      type="text"
                      name="discord_id"
                      defaultValue={profile?.discord_id || ''}
                      className="grow"
                      placeholder="ID на потребителя в Discord"
                    />
                  </label>
                </div>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Имейл</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiMail className="w-4 h-4 opacity-70" />
                    <input
                      type="email"
                      name="email"
                      defaultValue={profile?.email || ''}
                      className="grow opacity-70 cursor-not-allowed"
                      required
                      readOnly
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Роля</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiUserCheck className="w-4 h-4 opacity-70" />
                    <select
                      name="role"
                      defaultValue={profile?.role || ''}
                      className="grow bg-transparent outline-none"
                    >
                      <option value="">Без роля</option>
                      <option value="admin">Администратор</option>
                      <option value="team">Екип</option>
                      <option value="user">Потребител</option>
                    </select>
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-between p-6 border-t sticky bottom-0 bg-white">
            {profile?.id && (
              <button
                type="button"
                onClick={() => {
                  if (confirm('Сигурни ли сте, че искате да изтриете този профил?')) {
                    onDelete(profile.id.toString());
                    onClose();
                  }
                }}
                className="btn btn-error btn-sm"
              >
                Изтрий профила
              </button>
            )}
            <div className="flex gap-2">
              <button
                type="button"
                onClick={onClose}
                className="btn btn-ghost btn-sm"
              >
                Затвори
              </button>
              <button
                type="submit"
                className="btn btn-primary btn-sm"
              >
                Запази
              </button>
            </div>
          </div>
        </form>
      </div>
      <div className="modal-backdrop bg-black/50" onClick={onClose} />
    </dialog>
  );
}