import React, { useState, useEffect } from 'react';
import { ChevronDown, LogOut, Edit2 } from 'lucide-react';

const SUPABASE_URL = 'https://jlnagnhmkmkqndtjisfq.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImpsbmFnbmhta21rcW5kdGppc2ZxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTcwMzEyMTcsImV4cCI6MjA3MjYwNzIxN30.Db0-LFo5wUXvPhgz3QB7V6S8LHPMqmS_ZsODz_k_IdE';

export default function CreatorHub() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [videos, setVideos] = useState([]);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [editingVideo, setEditingVideo] = useState(null);
  const [editForm, setEditForm] = useState({});
  const [session, setSession] = useState(null);

  useEffect(() => {
    checkUser();
  }, []);

  const checkUser = async () => {
    try {
      const response = await fetch(`${SUPABASE_URL}/auth/v1/user`, {
        headers: {
          'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
          'apikey': SUPABASE_ANON_KEY,
        },
      });

      if (response.ok) {
        const userData = await response.json();
        setUser(userData);
        setSession(SUPABASE_ANON_KEY);
        await fetchVideos(userData.id);
      }
      setLoading(false);
    } catch (error) {
      console.error('Error checking user:', error);
      setLoading(false);
    }
  };

  const fetchVideos = async (userId) => {
    try {
      const response = await fetch(
        `${SUPABASE_URL}/rest/v1/videos?user_id=eq.${userId}`,
        {
          headers: {
            'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
            'apikey': SUPABASE_ANON_KEY,
            'Content-Type': 'application/json',
          },
        }
      );

      if (response.ok) {
        const data = await response.json();
        setVideos(data || []);
      }
    } catch (error) {
      console.error('Error fetching videos:', error);
    }
  };

  const handleSignUp = async () => {
    const email = `creator${Date.now()}@example.com`;
    const password = 'TemporaryPassword123!';

    try {
      const response = await fetch(`${SUPABASE_URL}/auth/v1/signup`, {
        method: 'POST',
        headers: {
          'apikey': SUPABASE_ANON_KEY,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        alert(`Sign up error: ${data.message}`);
      } else {
        setUser(data.user);
        setSession(data.session.access_token);
        await fetchVideos(data.user.id);
      }
    } catch (error) {
      alert('Sign up error: ' + error.message);
    }
  };

  const handleSignOut = async () => {
    setUser(null);
    setSession(null);
    setVideos([]);
    setDropdownOpen(false);
  };

  const startEdit = (video) => {
    setEditingVideo(video.id);
    setEditForm({
      title: video.title || '',
      description: video.description || '',
      thumbnail: video.thumbnail || '',
      visibility: video.visibility || 'private',
      category: video.category || '',
      hashtags: video.hashtags || '',
    });
  };

  const saveEdit = async () => {
    try {
      const response = await fetch(
        `${SUPABASE_URL}/rest/v1/videos?id=eq.${editingVideo}`,
        {
          method: 'PATCH',
          headers: {
            'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
            'apikey': SUPABASE_ANON_KEY,
            'Content-Type': 'application/json',
            'Prefer': 'return=representation',
          },
          body: JSON.stringify(editForm),
        }
      );

      if (response.ok) {
        const updatedData = await response.json();
        setVideos(videos.map(v => 
          v.id === editingVideo ? updatedData[0] : v
        ));
        setEditingVideo(null);
      } else {
        alert('Failed to update video');
      }
    } catch (error) {
      console.error('Error updating video:', error);
      alert('Failed to update video');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-900">
        <div className="text-white">Loading...</div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-900">
        <div className="text-center">
          <img 
            src="https://sc2.tfcdn.net/content/static/TingleFlow%20Logo%20White.svg" 
            alt="TingleFlow" 
            className="w-32 mx-auto mb-8"
          />
          <h1 className="text-3xl font-bold text-white mb-8">Creator Hub</h1>
          <button
            onClick={handleSignUp}
            className="waves-effect waves-light btn blue select-none"
          >
            Sign In / Sign Up
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-gray-900 min-h-screen">
      {/* Header */}
      <nav className="bg-gray-800 border-b border-gray-700 px-6 py-4 flex items-center justify-between">
        <img 
          src="https://sc2.tfcdn.net/content/static/TingleFlow%20Logo%20White.svg" 
          alt="TingleFlow" 
          className="w-8"
        />
        
        <div className="relative">
          <button
            onClick={() => setDropdownOpen(!dropdownOpen)}
            className="flex items-center gap-3 text-white hover:text-gray-300 transition select-none"
          >
            <div className="text-right">
              <div className="text-sm font-semibold">{user.user_metadata?.display_name || 'Creator'}</div>
              <div className="text-xs text-gray-400">@{user.user_metadata?.username || user.email?.split('@')[0]}</div>
            </div>
            <img
              src={user.user_metadata?.avatar_url || `https://ui-avatars.com/api/?name=${user.email}`}
              alt="Profile"
              className="w-10 h-10 rounded-full"
            />
            <ChevronDown size={18} />
          </button>

          {dropdownOpen && (
            <div className="absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg z-50">
              <button
                onClick={handleSignOut}
                className="w-full text-left px-4 py-3 text-white hover:bg-gray-600 rounded-lg flex items-center gap-2 transition select-none"
              >
                <LogOut size={18} />
                Sign Out
              </button>
            </div>
          )}
        </div>
      </nav>

      {/* Main Content */}
      <div className="p-8">
        <h2 className="text-2xl font-bold text-white mb-6">Your Videos</h2>

        {videos.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-gray-400">No videos yet</p>
          </div>
        ) : (
          <div className="grid gap-6">
            {videos.map((video) => (
              <div
                key={video.id}
                className="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-gray-600 transition"
              >
                {editingVideo === video.id ? (
                  <div className="p-6 space-y-4">
                    <h3 className="text-xl font-bold text-white mb-4">Edit Video</h3>
                    
                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Title</label>
                      <input
                        type="text"
                        value={editForm.title}
                        onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Description</label>
                      <textarea
                        value={editForm.description}
                        onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none h-24"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Thumbnail URL</label>
                      <input
                        type="text"
                        value={editForm.thumbnail}
                        onChange={(e) => setEditForm({ ...editForm, thumbnail: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Visibility</label>
                      <select
                        value={editForm.visibility}
                        onChange={(e) => setEditForm({ ...editForm, visibility: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                      >
                        <option value="private">Private</option>
                        <option value="public">Public</option>
                        <option value="unlisted">Unlisted</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Category</label>
                      <input
                        type="text"
                        value={editForm.category}
                        onChange={(e) => setEditForm({ ...editForm, category: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-300 mb-2">Hashtags</label>
                      <input
                        type="text"
                        value={editForm.hashtags}
                        onChange={(e) => setEditForm({ ...editForm, hashtags: e.target.value })}
                        className="w-full bg-gray-700 text-white px-4 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
                        placeholder="#tag1 #tag2"
                      />
                    </div>

                    <div className="flex gap-3 pt-4">
                      <button
                        onClick={saveEdit}
                        className="waves-effect waves-light btn green select-none flex-1"
                      >
                        Save
                      </button>
                      <button
                        onClick={() => setEditingVideo(null)}
                        className="waves-effect waves-light btn grey select-none flex-1"
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                ) : (
                  <div className="p-6 flex gap-6">
                    {video.thumbnail && (
                      <img
                        src={video.thumbnail}
                        alt={video.title}
                        className="w-32 h-32 object-cover rounded"
                      />
                    )}
                    
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-white mb-2">{video.title}</h3>
                      <p className="text-gray-400 text-sm mb-3">{video.description}</p>
                      
                      <div className="flex flex-wrap gap-4 text-xs text-gray-400 mb-4">
                        {video.category && (
                          <span className="bg-gray-700 px-2 py-1 rounded">
                            {video.category}
                          </span>
                        )}
                        <span className="bg-gray-700 px-2 py-1 rounded">
                          {video.visibility || 'private'}
                        </span>
                        {video.hashtags && (
                          <span className="text-gray-500">{video.hashtags}</span>
                        )}
                      </div>

                      <button
                        onClick={() => startEdit(video)}
                        className="waves-effect waves-light btn blue select-none"
                      >
                        <Edit2 size={16} className="inline mr-2" />
                        Edit
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      <style>{`
        .waves-effect {
          position: relative;
          overflow: hidden;
          user-select: none;
          cursor: pointer;
          vertical-align: middle;
          z-index: 1;
        }

        .waves-effect.waves-light .waves-ripple {
          background-color: rgba(255, 255, 255, 0.45);
        }

        .waves-ripple {
          position: absolute;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          margin-top: -10px;
          margin-left: -10px;
          opacity: 0;
          background-color: rgba(0, 0, 0, 0.2);
          animation: ripple 0.6s ease-out;
          pointer-events: none;
        }

        @keyframes ripple {
          0% {
            opacity: 1;
            transform: scale(0);
          }
          100% {
            opacity: 0;
            transform: scale(3);
          }
        }

        .btn {
          display: inline-block;
          padding: 10px 20px;
          border-radius: 4px;
          border: none;
          font-weight: 500;
          transition: all 0.3s ease;
          outline: 0;
          cursor: pointer;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .btn.blue {
          background-color: #2196F3;
          color: white;
        }

        .btn.blue:hover {
          background-color: #1976D2;
        }

        .btn.green {
          background-color: #4CAF50;
          color: white;
        }

        .btn.green:hover {
          background-color: #388E3C;
        }

        .btn.grey {
          background-color: #9E9E9E;
          color: white;
        }

        .btn.grey:hover {
          background-color: #757575;
        }

        .waves-effect {
          position: relative;
          overflow: hidden;
        }

        .waves-effect::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.5);
          transform: translate(-50%, -50%);
          transition: width 0.6s, height 0.6s;
          pointer-events: none;
        }

        .waves-effect:active::before {
          width: 300px;
          height: 300px;
        }

        .select-none {
          user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
        }
      `}</style>
    </div>
  );
}