import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { v4 as uuidv4 } from "uuid";

export default function HomePage() {
  const [users, setUsers] = useState([]);
  const [username, setUsername] = useState("");

  const handleCreateAccount = () => {
    if (username.trim() === "") return;
    const newUser = {
      name: username,
      uid: uuidv4(),
    };
    setUsers([...users, newUser]);
    setUsername("");
    console.log("New User:", newUser);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <header className="flex justify-between items-center p-4 bg-white shadow rounded-2xl mb-6">
        <h1 className="text-2xl font-bold">StreamX</h1>
        <div className="space-x-4">
          <Button>Go Live</Button>
          <Button variant="outline">Upload Video</Button>
        </div>
      </header>

      <main className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Account Creation Section */}
        <section className="col-span-1 md:col-span-3 mb-6">
          <h2 className="text-xl font-semibold mb-2">Create Account</h2>
          <div className="flex gap-4 items-center">
            <Input
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="Enter username"
              className="w-64"
            />
            <Button onClick={handleCreateAccount}>Create Account</Button>
          </div>
          <ul className="mt-4 text-sm text-gray-700">
            {users.map((user, index) => (
              <li key={index}>
                <strong>{user.name}</strong>: {user.uid}
              </li>
            ))}
          </ul>
        </section>

        {/* Live Streams */}
        <section className="md:col-span-2">
          <h2 className="text-xl font-semibold mb-4">Live Now</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {[1, 2, 3, 4].map((stream) => (
              <Card key={stream} className="hover:shadow-lg transition">
                <CardContent className="p-4">
                  <div className="aspect-video bg-gray-300 rounded-lg mb-2" />
                  <h3 className="font-semibold">Live Stream {stream}</h3>
                  <p className="text-sm text-gray-500">User{stream}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* Recent Videos */}
        <aside>
          <h2 className="text-xl font-semibold mb-4">Recent Videos</h2>
          <div className="space-y-4">
            {[1, 2, 3].map((video) => (
              <Card key={video} className="flex items-center space-x-4 p-3">
                <div className="w-20 h-14 bg-gray-300 rounded" />
                <div>
                  <p className="font-medium">Video Title {video}</p>
                  <span className="text-sm text-gray-500">Uploader{video}</span>
                </div>
              </Card>
            ))}
          </div>
        </aside>
      </main>
    </div>
  );
}
