//Page3.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import './Page3.css';
import image from './components/image.png';
import somaiyatrust from './components/somaiyatrust.png';

const Page3 = () => {
  const [meetingDetails, setMeetingDetails] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // Handle form submission
  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);

    try {
      const response = await fetch('/create-meeting', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();
      setMeetingDetails({
        id: data.id,
        join_url: data.join_url,
      });
    } catch (error) {
      console.error("Error creating meeting:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const copyToClipboard = () => {
    navigator.clipboard.writeText(meetingDetails.join_url);
    alert('Link copied to clipboard!');
  };

  return (
    <div className="page-container">
      {/* Header Bar */}
      <header className="header-bar">
        <img src={image} alt="Left Logo" className="leftlogo" />
        <h1 className="college-name">Somaiya Scheduler</h1>
        <img src={somaiyatrust} alt="Right Logo" className="rightlogo" />
      </header>

      {/* Navigation Bar */}
      <nav className="navbar">
        <ul>
          <li><Link to="/page2">Home</Link></li>
          <li><Link to="/page3" className="active">Zoom Meeting</Link></li>
          <li><Link to="/page5">Meeting DataBase</Link></li>
          <li><Link to="/page6">Edit DataBase</Link></li>
          <li><Link to="/">Log Out</Link></li>
        </ul>
      </nav>

      {/* Main Content */}
      <div className="zoom-container">
        <div className="zoom-card">
          <div className="zoom-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 10L19.5528 7.72361C20.2177 7.39116 21 7.87465 21 8.61803V15.382C21 16.1253 20.2177 16.6088 19.5528 16.2764L15 14M5 18H13C14.1046 18 15 17.1046 15 16V8C15 6.89543 14.1046 6 13 6H5C3.89543 6 3 6.89543 3 8V16C3 17.1046 3.89543 18 5 18Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <h2>Generate Zoom Meeting</h2>
          <p className="subtitle">Create an instant Zoom meeting link to share with participants</p>
          
          <form id="meetingForm" onSubmit={handleSubmit}>
            <button type="submit" className="create-btn" disabled={isLoading}>
              {isLoading ? (
                <>
                  <span className="spinner"></span>
                  Creating...
                </>
              ) : (
                'Create Meeting'
              )}
            </button>
          </form>

          {meetingDetails && (
            <div className="meeting-details">
              <div className="success-badge">
                ✓ Meeting Created Successfully!
              </div>
              <div className="detail-item">
                <span className="detail-label">Meeting ID</span>
                <span className="detail-value">{meetingDetails.id}</span>
              </div>
              <div className="detail-item">
                <span className="detail-label">Join URL</span>
                <a href={meetingDetails.join_url} target="_blank" rel="noopener noreferrer" className="detail-link">
                  {meetingDetails.join_url}
                </a>
              </div>
              <button className="copy-btn" onClick={copyToClipboard}>
                📋 Copy Link
              </button>
            </div>
          )}
        </div>

        <Link to="/page2" className="back-link">
          ← Back to Dashboard
        </Link>
      </div>
    </div>
  );
};

export default Page3;
