import React, { useState } from 'react';

export default function InviteModal({ server, channel, onClose }) {
  const [inviteLink, setInviteLink] = useState('https://aethex.gg/invite/Xk9Q3p5');
  const [copied, setCopied] = useState(false);
  const [expiresIn, setExpiresIn] = useState('7');
  const [maxUses, setMaxUses] = useState('0');
  const [showAdvanced, setShowAdvanced] = useState(false);

  const serverName = server?.name || 'AeThex Foundation';
  const channelName = channel?.name || 'general';

  const copyLink = () => {
    navigator.clipboard.writeText(inviteLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const generateNewLink = () => {
    // Simulate generating a new invite code
    const code = Math.random().toString(36).substring(2, 8);
    setInviteLink(`https://aethex.gg/invite/${code}`);
    setCopied(false);
  };

  const friends = [
    { id: 1, name: 'Sarah', avatar: 'S', gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)', status: 'online' },
    { id: 2, name: 'Marcus', avatar: 'M', gradient: 'linear-gradient(135deg, #0066ff, #003380)', status: 'online' },
    { id: 3, name: 'JohnDev', avatar: 'J', status: 'idle' },
  ];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="invite-modal" onClick={(e) => e.stopPropagation()}>
        <div className="invite-header">
          <h2>Invite friends to {serverName}</h2>
          <span className="invite-channel">#{channelName}</span>
          <button className="modal-close" onClick={onClose}>✕</button>
        </div>

        <div className="invite-content">
          <div className="invite-search">
            <input 
              type="text" 
              placeholder="Search for friends"
              className="friend-search-input"
            />
          </div>

          <div className="invite-friends-list">
            {friends.map((friend) => (
              <div key={friend.id} className="invite-friend-item">
                <div 
                  className="invite-friend-avatar"
                  style={{ background: friend.gradient || '#36393f' }}
                >
                  {friend.avatar}
                </div>
                <span className="invite-friend-name">{friend.name}</span>
                <button className="invite-btn">Invite</button>
              </div>
            ))}
          </div>

          <div className="invite-link-section">
            <label>OR, SEND A SERVER INVITE LINK TO A FRIEND</label>
            <div className="invite-link-row">
              <input 
                type="text" 
                value={inviteLink}
                readOnly
                className="invite-link-input"
              />
              <button 
                className={`copy-link-btn ${copied ? 'copied' : ''}`}
                onClick={copyLink}
              >
                {copied ? 'Copied!' : 'Copy'}
              </button>
            </div>
            <p className="link-expires">
              Your invite link expires in 7 days. 
              <button className="edit-link-btn" onClick={() => setShowAdvanced(!showAdvanced)}>
                Edit invite link
              </button>
            </p>
          </div>

          {showAdvanced && (
            <div className="invite-advanced">
              <div className="advanced-option">
                <label>EXPIRE AFTER</label>
                <select 
                  value={expiresIn}
                  onChange={(e) => setExpiresIn(e.target.value)}
                  className="advanced-select"
                >
                  <option value="1800">30 minutes</option>
                  <option value="3600">1 hour</option>
                  <option value="21600">6 hours</option>
                  <option value="43200">12 hours</option>
                  <option value="86400">1 day</option>
                  <option value="7">7 days</option>
                  <option value="0">Never</option>
                </select>
              </div>

              <div className="advanced-option">
                <label>MAX NUMBER OF USES</label>
                <select 
                  value={maxUses}
                  onChange={(e) => setMaxUses(e.target.value)}
                  className="advanced-select"
                >
                  <option value="0">No limit</option>
                  <option value="1">1 use</option>
                  <option value="5">5 uses</option>
                  <option value="10">10 uses</option>
                  <option value="25">25 uses</option>
                  <option value="50">50 uses</option>
                  <option value="100">100 uses</option>
                </select>
              </div>

              <label className="temporary-toggle">
                <input type="checkbox" />
                <span>Grant temporary membership</span>
              </label>

              <button className="generate-new-btn" onClick={generateNewLink}>
                Generate a New Link
              </button>
            </div>
          )}
        </div>

        <div className="invite-footer">
          <div className="invite-tip">
            <span className="tip-icon">💡</span>
            <span>Customize your invite link with Server Boost</span>
          </div>
        </div>
      </div>
    </div>
  );
}
