import React, { useState } from 'react';
import { Video, Heart, Users, Copy, Check, ExternalLink, Calendar, Lock, Trash2 } from 'lucide-react';

function HeartUnitedMeetings() {
  const [meetings, setMeetings] = useState([]);
  const [newMeeting, setNewMeeting] = useState({
    name: '',
    password: '',
    scheduled: ''
  });
  const [copied, setCopied] = useState(null);

  const DOMAIN = 'meet.heart-united.com';

  const generateRoomId = () => {
    return Math.random().toString(36).substring(2, 10);
  };

  const createMeeting = () => {
    if (!newMeeting.name) {
      alert('Bitte Meeting-Namen eingeben!');
      return;
    }

    const roomId = generateRoomId();
    const meeting = {
      id: roomId,
      name: newMeeting.name,
      url: `https://${DOMAIN}/${roomId}`,
      password: newMeeting.password || null,
      scheduled: newMeeting.scheduled || 'Sofort',
      created: new Date().toLocaleString('de-DE'),
      participants: 0
    };

    setMeetings([meeting, ...meetings]);
    setNewMeeting({ name: '', password: '', scheduled: '' });
  };

  const copyLink = (url, id) => {
    navigator.clipboard.writeText(url);
    setCopied(id);
    setTimeout(() => setCopied(null), 2000);
  };

  const deleteMeeting = (id) => {
    if (confirm('Meeting wirklich löschen?')) {
      setMeetings(meetings.filter(m => m.id !== id));
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-950 via-purple-950 to-gray-950 text-white p-4">
      <div className="max-w-6xl mx-auto">
        
        {/* Header */}
        <div className="bg-gradient-to-r from-pink-600 via-purple-600 to-blue-600 rounded-2xl p-8 mb-8 shadow-2xl">
          <div className="flex items-center gap-4 mb-3">
            <div className="bg-white bg-opacity-20 rounded-full p-3">
              <Heart className="w-10 h-10" />
            </div>
            <div>
              <h1 className="text-4xl font-bold">Heart United Meetings</h1>
              <p className="text-purple-100 text-lg">meet.heart-united.com</p>
            </div>
          </div>
          <p className="text-white text-opacity-90">
            Deine eigene Video-Konferenz Plattform – sicher, privat, unbegrenzt
          </p>
        </div>

        {/* Stats */}
        <div className="grid md:grid-cols-3 gap-4 mb-8">
          <div className="bg-gray-900 bg-opacity-50 backdrop-blur rounded-xl p-6 border border-gray-800">
            <div className="flex items-center gap-3 mb-2">
              <Video className="w-6 h-6 text-blue-400" />
              <span className="text-gray-400 text-sm">Aktive Meetings</span>
            </div>
            <div className="text-3xl font-bold">{meetings.length}</div>
          </div>

          <div className="bg-gray-900 bg-opacity-50 backdrop-blur rounded-xl p-6 border border-gray-800">
            <div className="flex items-center gap-3 mb-2">
              <Users className="w-6 h-6 text-green-400" />
              <span className="text-gray-400 text-sm">Teilnehmer heute</span>
            </div>
            <div className="text-3xl font-bold">
              {meetings.reduce((sum, m) => sum + m.participants, 0)}
            </div>
          </div>

          <div className="bg-gray-900 bg-opacity-50 backdrop-blur rounded-xl p-6 border border-gray-800">
            <div className="flex items-center gap-3 mb-2">
              <Heart className="w-6 h-6 text-pink-400" />
              <span className="text-gray-400 text-sm">Server-Status</span>
            </div>
            <div className="text-3xl font-bold text-green-400">Online</div>
          </div>
        </div>

        {/* Meeting erstellen */}
        <div className="bg-gray-900 bg-opacity-50 backdrop-blur rounded-2xl p-8 mb-8 border border-gray-800 shadow-xl">
          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
            <Video className="w-7 h-7 text-purple-400" />
            Neues Meeting erstellen
          </h2>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-bold mb-2 text-gray-300">
                Meeting-Name *
              </label>
              <input
                type="text"
                value={newMeeting.name}
                onChange={(e) => setNewMeeting({...newMeeting, name: e.target.value})}
                className="w-full bg-gray-800 bg-opacity-50 rounded-xl px-6 py-4 text-lg border border-gray-700 focus:border-purple-500 focus:outline-none"
                placeholder="z.B. Team-Meeting, Kundengespräch, Workshop..."
              />
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-bold mb-2 text-gray-300">
                  <Lock className="w-4 h-4 inline mr-1" />
                  Passwort (optional)
                </label>
                <input
                  type="text"
                  value={newMeeting.password}
                  onChange={(e) => setNewMeeting({...newMeeting, password: e.target.value})}
                  className="w-full bg-gray-800 bg-opacity-50 rounded-xl px-6 py-4 border border-gray-700 focus:border-purple-500 focus:outline-none"
                  placeholder="Leer lassen für öffentliches Meeting"
                />
              </div>

              <div>
                <label className="block text-sm font-bold mb-2 text-gray-300">
                  <Calendar className="w-4 h-4 inline mr-1" />
                  Zeitpunkt (optional)
                </label>
                <input
                  type="datetime-local"
                  value={newMeeting.scheduled}
                  onChange={(e) => setNewMeeting({...newMeeting, scheduled: e.target.value})}
                  className="w-full bg-gray-800 bg-opacity-50 rounded-xl px-6 py-4 border border-gray-700 focus:border-purple-500 focus:outline-none"
                />
              </div>
            </div>

            <button
              onClick={createMeeting}
              className="w-full flex items-center justify-center gap-3 px-8 py-5 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-xl font-bold text-lg shadow-lg transform hover:scale-105 transition"
            >
              <Video className="w-6 h-6" />
              Meeting erstellen
            </button>
          </div>
        </div>

        {/* Meetings Liste */}
        <div className="bg-gray-900 bg-opacity-50 backdrop-blur rounded-2xl p-8 border border-gray-800 shadow-xl">
          <h2 className="text-2xl font-bold mb-6">
            Meine Meetings ({meetings.length})
          </h2>

          {meetings.length === 0 ? (
            <div className="text-center py-16">
              <div className="bg-gray-800 bg-opacity-50 rounded-full w-24 h-24 mx-auto mb-6 flex items-center justify-center">
                <Video className="w-12 h-12 text-gray-600" />
              </div>
              <p className="text-gray-400 text-lg mb-2">Noch keine Meetings erstellt</p>
              <p className="text-gray-500">Erstelle dein erstes Meeting oben</p>
            </div>
          ) : (
            <div className="space-y-4">
              {meetings.map(meeting => (
                <div 
                  key={meeting.id} 
                  className="bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-gray-700 hover:border-purple-500 transition"
                >
                  <div className="flex items-start justify-between gap-6">
                    <div className="flex-1">
                      <h3 className="text-xl font-bold mb-3">{meeting.name}</h3>
                      
                      <div className="flex flex-wrap gap-4 mb-4 text-sm">
                        <div className="flex items-center gap-2 text-gray-400">
                          <Calendar className="w-4 h-4" />
                          <span>{meeting.scheduled}</span>
                        </div>
                        {meeting.password && (
                          <div className="flex items-center gap-2 text-yellow-400">
                            <Lock className="w-4 h-4" />
                            <span>Passwort: {meeting.password}</span>
                          </div>
                        )}
                        <div className="flex items-center gap-2 text-gray-400">
                          <Users className="w-4 h-4" />
                          <span>{meeting.participants} Teilnehmer</span>
                        </div>
                      </div>

                      <div className="flex gap-2">
                        <input
                          type="text"
                          value={meeting.url}
                          readOnly
                          className="flex-1 bg-gray-900 rounded-lg px-4 py-3 text-sm border border-gray-700"
                        />
                        <button
                          onClick={() => copyLink(meeting.url, meeting.id)}
                          className="px-5 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
                          title="Link kopieren"
                        >
                          {copied === meeting.id ? (
                            <Check className="w-5 h-5 text-green-400" />
                          ) : (
                            <Copy className="w-5 h-5" />
                          )}
                        </button>
                      </div>

                      <p className="text-xs text-gray-500 mt-3">
                        Erstellt: {meeting.created}
                      </p>
                    </div>

                    <div className="flex flex-col gap-2">
                      <a
                        href={meeting.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 rounded-lg font-bold whitespace-nowrap shadow-lg transform hover:scale-105 transition"
                      >
                        <ExternalLink className="w-5 h-5" />
                        Beitreten
                      </a>
                      <button
                        onClick={() => deleteMeeting(meeting.id)}
                        className="flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 rounded-lg font-bold"
                      >
                        <Trash2 className="w-5 h-5" />
                        Löschen
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Info Box */}
        <div className="mt-8 bg-gradient-to-r from-blue-900 to-purple-900 bg-opacity-50 backdrop-blur border border-blue-700 rounded-2xl p-6">
          <div className="flex items-start gap-3">
            <Heart className="w-6 h-6 text-pink-400 flex-shrink-0 mt-1" />
            <div>
              <h3 className="font-bold mb-2 text-blue-300">Wie funktioniert's?</h3>
              <ul className="text-sm text-blue-200 space-y-1">
                <li>• Erstelle ein Meeting mit individuellem Namen</li>
                <li>• Kopiere den Link und teile ihn mit Teilnehmern</li>
                <li>• Teilnehmer brauchen keinen Account – nur den Link öffnen</li>
                <li>• Optional: Setze ein Passwort für mehr Sicherheit</li>
                <li>• Unbegrenzte Meeting-Dauer und Teilnehmer-Anzahl</li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

export default HeartUnitedMeetings;