"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import supabase from "../../utils/supabase/client";

const cards = [
  {
    title: "Vibe Code Jazz",
    img: "/radio/lofi-coding.png",
    alt: "a lo-fi computer screen with code on it, vaporwave",
  },
  {
    title: "Love Songs to Cry To",
    img: "/radio/love-songs.png",
    alt: "love songs",
  },
  {
    title: "Hi-Fi Lo-Fi",
    img: "/radio/hifi-lofi.png",
    alt: "a hi-fi stereo (lo-fi)",
  },
];

const FALLBACK_IMAGE = "/radio/lofi-coding.png";

export default function RadioPage() {
  const [rooms, setRooms] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchRooms = async () => {
      setLoading(true);
      setError(null);
      try {
        const { data, error } = await supabase
          .from("radio_rooms")
          .select("id, name, image_url")
          .order("created_at", { ascending: false })
          .limit(5);
        if (error) throw error;
        setRooms(data || []);
      } catch (err: any) {
        setError("Failed to load rooms");
      } finally {
        setLoading(false);
      }
    };
    fetchRooms();
  }, []);

  return (
    <div className="min-h-screen bg-[#171717] flex flex-col items-center justify-start py-12">
      <div className="w-full max-w-3xl">
        <h1 className="text-5xl font-light text-[#F0F0F0] mb-8 font-['PP Editorial New',serif]">
          Good afternoon, Marty
        </h1>
        <form className="w-full mb-12">
          <input
            type="text"
            placeholder="what do you want to listen to?"
            className="w-full px-6 py-4 rounded-2xl border border-[#2C2C2C] bg-[#212121] text-[#8B8B8B] text-xl focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-[#8B8B8B]"
          />
        </form>
        {/* Supabase Rooms */}
        <div className="flex flex-row gap-10 justify-center mb-10 flex-wrap">
          {loading && <div className="text-white">Loading rooms...</div>}
          {error && <div className="text-red-500">{error}</div>}
          {!loading &&
            !error &&
            rooms.map((room) => (
              <Link
                key={room.id}
                href={`/radio/${room.id}`}
                className="flex flex-col items-start bg-[#212121] rounded-[25px] border border-[#2C2C2C] overflow-hidden w-[212px] shadow-lg hover:scale-105 transition-transform"
              >
                <div className="w-full h-[212px] bg-gray-800 flex items-center justify-center">
                  <img
                    src={room.image_url || FALLBACK_IMAGE}
                    alt={room.name}
                    className="w-full h-full object-cover"
                    style={{ minHeight: 212, minWidth: 212 }}
                  />
                </div>
                <div className="p-4">
                  <div className="text-white text-lg font-normal font-['PP Neue Montreal',sans-serif] leading-tight">
                    {room.name}
                  </div>
                </div>
              </Link>
            ))}
        </div>
      </div>
    </div>
  );
}