import React, { useState, useRef } from 'react';
import { network } from '../p2p/index.js';

export default function ServerSettingsModal({ onClose, activeServerObj, onDeleteServer }) {
  const [serverName, setServerName] = useState(activeServerObj.name || '');
  const [serverIcon, setServerIcon] = useState(activeServerObj.icon || null);
  const[allowAnyone, setAllowAnyone] = useState(activeServerObj.allowAnyoneToInvite);
  const fileInputRef = useRef(null);

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const MAX_SIZE = 128;
        let width = img.width;
        let height = img.height;
        
        if (width > height) {
          if (width > MAX_SIZE) { height *= MAX_SIZE / width; width = MAX_SIZE; }
        } else {
          if (height > MAX_SIZE) { width *= MAX_SIZE / height; height = MAX_SIZE; }
        }
        
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        
        const dataUrl = canvas.toDataURL(file.type === 'image/png' ? 'image/png' : 'image/jpeg', 0.8);
        setServerIcon(dataUrl);
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  };

  const handleSave = () => {
    if (serverName.trim() === '') return;
    network.updateServerSettings(activeServerObj.topicHex, serverName.trim(), serverIcon, allowAnyone);
    onClose();
  };

  const handleDelete = () => {
    if (window.confirm("Are you sure you want to completely delete this hub? All members will be removed and message history will be permanently wiped for everyone. This cannot be undone.")) {
      onDeleteServer();
    }
  };

  return (
    <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70" onClick={onClose}>
      <div className="bg-surface rounded-lg shadow-xl w-full max-w-md flex flex-col p-6 max-h-[90vh] overflow-y-auto border border-panel" onClick={e => e.stopPropagation()}>
        <h2 className="text-2xl font-bold text-center text-text mb-2">Hub Settings</h2>
        
        <div className="flex flex-col items-center gap-4 mt-2">
          <div 
            className={`w-24 h-24 rounded-md flex items-center justify-center text-white text-3xl font-bold cursor-pointer relative group overflow-hidden shrink-0 border-2 border-dashed border-muted hover:border-text ${serverIcon ? 'bg-transparent border-solid' : 'bg-panel'}`}
            onClick={() => fileInputRef.current?.click()}
          >
            {serverIcon ? (
              <img src={serverIcon} alt="hub icon" className="w-full h-full object-cover" />
            ) : (
              <div className="text-center text-xs text-muted flex flex-col items-center gap-1">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
                Change
              </div>
            )}
            <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
              <span className="text-[10px] uppercase tracking-wider text-white">Upload</span>
            </div>
            <input type="file" ref={fileInputRef} onChange={handleImageUpload} accept="image/png, image/jpeg" className="hidden" />
          </div>

          <div className="w-full">
            <label className="block text-xs font-bold text-muted uppercase mb-2 text-left">Hub Name</label>
            <input 
              type="text" 
              value={serverName}
              onChange={(e) => setServerName(e.target.value)}
              className="w-full bg-panel text-text rounded p-3 outline-none focus:ring-2 focus:ring-accent mb-4"
              placeholder="e.g. My Cool Club"
              maxLength={32}
            />

            <label className="block text-xs font-bold text-muted uppercase mb-2 text-left">Invite Permissions</label>
            <div className="flex items-center gap-3 bg-panel p-3 rounded">
              <input 
                type="checkbox" 
                checked={allowAnyone} 
                onChange={(e) => setAllowAnyone(e.target.checked)}
                className="w-5 h-5 accent-accent cursor-pointer"
              />
              <span className="text-sm text-text">Anyone can invite people to this hub</span>
            </div>
            <p className="text-[10px] text-muted mt-1 mb-4">If unchecked, only you (the Admin) can send invites.</p>

            <div className="bg-panel rounded p-4 border border-red-900/50 mt-2">
              <h3 className="text-red-500 font-bold mb-2 uppercase text-xs">Danger Zone</h3>
              <button 
                onClick={handleDelete}
                className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium transition-colors w-full"
              >
                Delete Hub
              </button>
            </div>
          </div>
        </div>
        
        <div className="flex justify-end gap-3 pt-4 mt-2">
          <button onClick={onClose} className="text-text hover:underline text-sm font-medium px-4 py-2">
            Cancel
          </button>
          <button onClick={handleSave} disabled={!serverName.trim()} className="bg-accent hover:opacity-90 text-white px-6 py-2.5 rounded text-sm font-medium transition-opacity disabled:opacity-50 disabled:cursor-not-allowed">
            Save Changes
          </button>
        </div>
      </div>
    </div>
  );
}