import React, { useState } from 'react';

export default function WelcomeScreen({ server, onComplete, onClose }) {
  const [step, setStep] = useState(0);
  const [selectedRoles, setSelectedRoles] = useState([]);
  const [selectedChannels, setSelectedChannels] = useState([]);

  const serverData = server || {
    name: 'AeThex Foundation',
    icon: 'F',
    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
    description: 'Official home of AeThex. Security, authentication, and core infrastructure.',
    memberCount: '128.5K',
    rules: [
      { id: 1, title: 'Be Respectful', description: 'Treat everyone with respect. No harassment, bullying, or hate speech.' },
      { id: 2, title: 'No Spam', description: 'Avoid excessive messages, self-promotion, or unsolicited advertisements.' },
      { id: 3, title: 'Stay On Topic', description: 'Keep discussions relevant to the channel topic.' },
      { id: 4, title: 'No NSFW Content', description: 'This is a SFW community. Keep content appropriate.' },
      { id: 5, title: 'Follow Discord TOS', description: 'Adhere to Discord\'s Terms of Service and Community Guidelines.' },
    ],
  };

  const roleOptions = [
    { id: 'developer', label: '💻 Developer', description: 'I build things with AeThex tools' },
    { id: 'gamer', label: '🎮 Gamer', description: 'I\'m here for gaming content' },
    { id: 'security', label: '🔒 Security', description: 'Interested in security topics' },
    { id: 'creator', label: '🎨 Creator', description: 'I create content' },
    { id: 'announcements', label: '📢 Announcements Only', description: 'Just here for updates' },
  ];

  const channelOptions = [
    { id: 'general', label: '# general', description: 'Main community chat' },
    { id: 'development', label: '# development', description: 'Dev discussions' },
    { id: 'gaming', label: '# gaming', description: 'Gaming chat' },
    { id: 'off-topic', label: '# off-topic', description: 'Random discussions' },
    { id: 'showcase', label: '# showcase', description: 'Share your projects' },
  ];

  const steps = [
    { id: 'welcome', title: 'Welcome' },
    { id: 'rules', title: 'Rules' },
    { id: 'roles', title: 'Pick Roles' },
    { id: 'channels', title: 'Channels' },
  ];

  const handleComplete = () => {
    onComplete?.({
      roles: selectedRoles,
      channels: selectedChannels,
    });
  };

  const toggleRole = (roleId) => {
    setSelectedRoles(prev => 
      prev.includes(roleId) 
        ? prev.filter(id => id !== roleId)
        : [...prev, roleId]
    );
  };

  const toggleChannel = (channelId) => {
    setSelectedChannels(prev => 
      prev.includes(channelId) 
        ? prev.filter(id => id !== channelId)
        : [...prev, channelId]
    );
  };

  return (
    <div className="welcome-overlay">
      <div className="welcome-screen">
        {/* Progress dots */}
        <div className="welcome-progress">
          {steps.map((s, idx) => (
            <div 
              key={s.id}
              className={`progress-dot ${idx === step ? 'active' : ''} ${idx < step ? 'completed' : ''}`}
            />
          ))}
        </div>

        {step === 0 && (
          <div className="welcome-step">
            <div 
              className="welcome-server-icon"
              style={{ background: serverData.gradient }}
            >
              {serverData.icon}
            </div>
            <h1>Welcome to {serverData.name}!</h1>
            <p className="welcome-description">{serverData.description}</p>
            <div className="welcome-stats">
              <span>👥 {serverData.memberCount} members</span>
            </div>
            <button className="welcome-btn primary" onClick={() => setStep(1)}>
              Continue
            </button>
          </div>
        )}

        {step === 1 && (
          <div className="welcome-step">
            <h2>📜 Server Rules</h2>
            <p className="step-subtitle">Please read and agree to our community rules</p>
            <div className="rules-list">
              {serverData.rules.map((rule, idx) => (
                <div key={rule.id} className="rule-item">
                  <span className="rule-number">{idx + 1}</span>
                  <div className="rule-content">
                    <h4>{rule.title}</h4>
                    <p>{rule.description}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="welcome-actions">
              <button className="welcome-btn secondary" onClick={() => setStep(0)}>
                Back
              </button>
              <button className="welcome-btn primary" onClick={() => setStep(2)}>
                I Agree
              </button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="welcome-step">
            <h2>🎭 Pick Your Roles</h2>
            <p className="step-subtitle">Select roles that match your interests</p>
            <div className="options-grid">
              {roleOptions.map(role => (
                <button
                  key={role.id}
                  className={`option-btn ${selectedRoles.includes(role.id) ? 'selected' : ''}`}
                  onClick={() => toggleRole(role.id)}
                >
                  <span className="option-label">{role.label}</span>
                  <span className="option-description">{role.description}</span>
                  {selectedRoles.includes(role.id) && (
                    <span className="option-check">✓</span>
                  )}
                </button>
              ))}
            </div>
            <div className="welcome-actions">
              <button className="welcome-btn secondary" onClick={() => setStep(1)}>
                Back
              </button>
              <button className="welcome-btn primary" onClick={() => setStep(3)}>
                Continue
              </button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="welcome-step">
            <h2>📺 Choose Channels</h2>
            <p className="step-subtitle">Pick channels you want to see</p>
            <div className="options-grid">
              {channelOptions.map(channel => (
                <button
                  key={channel.id}
                  className={`option-btn ${selectedChannels.includes(channel.id) ? 'selected' : ''}`}
                  onClick={() => toggleChannel(channel.id)}
                >
                  <span className="option-label">{channel.label}</span>
                  <span className="option-description">{channel.description}</span>
                  {selectedChannels.includes(channel.id) && (
                    <span className="option-check">✓</span>
                  )}
                </button>
              ))}
            </div>
            <div className="welcome-actions">
              <button className="welcome-btn secondary" onClick={() => setStep(2)}>
                Back
              </button>
              <button className="welcome-btn primary" onClick={handleComplete}>
                Finish Setup
              </button>
            </div>
          </div>
        )}

        <button className="skip-btn" onClick={onClose}>
          Skip for now
        </button>
      </div>
    </div>
  );
}
