import React, { useState } from "react";
import { createStation } from "../utils/StationsCreate";
import { useNavigate } from "react-router-dom";

function CreateStation() {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [joinCode, setJoinCode] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [isCopied, setIsCopied] = useState(false);

  const handleCreateStation = async () => {
    if (!name.trim() || !description.trim()) {
      setError("Please fill in all fields");
      return;
    }

    setIsLoading(true);
    setError("");

    try {
      const code = await createStation(name, description);
      setJoinCode(code);
    } catch (error) {
      setError(error.message || "Failed to create station");
    } finally {
      setIsLoading(false);
    }
  };

  const handleGoToStation = () => {
    // Navigate to the station or home page
    navigate("/");
  };

  const handleCopyCode = async () => {
    try {
      await navigator.clipboard.writeText(joinCode);
      setIsCopied(true);
      // Reset the animation after 2 seconds
      setTimeout(() => {
        setIsCopied(false);
      }, 2000);
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  };

  return (
    <div className="create-station-container">
      <div className="create-station-main">
        {/* Left Section - Vinyl Animation */}
        <div className="create-station-left-section">
          <div className="create-station-vinyl-container">
            <div className="create-station-vinyl-record">
              <div className="vinyl-center"></div>
              <div className="vinyl-grooves"></div>
            </div>
            
            {/* Animated Music Notes */}
            <div className="create-station-music-notes">
              <div className="music-note note-1">♪</div>
              <div className="music-note note-2">♫</div>
              <div className="music-note note-3">♪</div>
            </div>
          </div>
        </div>

        {/* Right Section - Create Station Form */}
        <div className="create-station-right-section">
          <div className="create-station-content">
            <header className="create-station-header">
              <h1>Create a Station on Serena</h1>
              <p className="create-station-subtitle">Start your own collaborative music experience</p>
            </header>

            {!joinCode ? (
              <form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
                <div className="form-group">
                  <label htmlFor="station-name">Station Name</label>
                  <input
                    id="station-name"
                    type="text"
                    placeholder="Enter your station name..."
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    disabled={isLoading}
                  />
                </div>

                <div className="form-group">
                  <label htmlFor="station-description">Description</label>
                  <textarea
                    id="station-description"
                    placeholder="Describe your station's vibe..."
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    disabled={isLoading}
                    rows={4}
                  />
                </div>

                {error && (
                  <div className="error-message">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
                    </svg>
                    {error}
                  </div>
                )}

                <button
                  type="button"
                  className="create-station-final-btn"
                  onClick={handleCreateStation}
                  disabled={!name.trim() || !description.trim() || isLoading}
                >
                  {isLoading ? (
                    <>
                      <div className="loading-spinner"></div>
                      Creating Station...
                    </>
                  ) : (
                    <>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
                      </svg>
                      Create Radio Station
                    </>
                  )}
                </button>
              </form>
            ) : (
              <div className="success-state">
                <div className="success-icon">
                  <svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                  </svg>
                </div>
                <h2>Station Created Successfully!</h2>
                <p>Your station is ready to go. Share this join code with your friends:</p>
                
                <div className="join-code-display">
                  <span className="join-code">{joinCode}</span>
                  <button 
                    className={`copy-btn ${isCopied ? 'copied' : ''}`}
                    onClick={handleCopyCode}
                  >
                    {isCopied ? (
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                      </svg>
                    ) : (
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                      </svg>
                    )}
                  </button>
                </div>

                {isCopied && (
                  <div className="copy-feedback">
                    <span className="copy-success-message">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                      </svg>
                      Copied to clipboard!
                    </span>
                  </div>
                )}

                <button className="go-to-station-btn" onClick={handleGoToStation}>
                  Go to Home
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default CreateStation;