import React from 'react';
import { notFound } from 'next/navigation';
import { MapPin, Users, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { api, Campaign } from '@/lib/api';
import VideoPlayer from './VideoPlayer';
import DonationCard from '../../components/DonationCard';

export default async function StreamDetailPage({ params }: { params: { id: string } }) {
  let stream;
  let campaigns: Campaign[] = [];
  try {
    [stream, campaigns] = await Promise.all([
      api.getStream(params.id),
      api.getCampaigns(),
    ]);
  } catch {
    notFound();
  }

  return (
    <div className="max-w-7xl mx-auto px-6 py-10 space-y-8">
      {/* Back */}
      <Link href="/streams" className="inline-flex items-center gap-2 text-stone-400 hover:text-white text-sm font-medium transition-colors">
        <ArrowLeft size={16} /> Back to all cameras
      </Link>

      {/* Status bar */}
      <div className="flex flex-wrap items-center gap-4">
        <span className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase ${
          stream.status === 'live' ? 'bg-red-500/20 text-red-400' : 'bg-stone-700/40 text-stone-400'
        }`}>
          {stream.status === 'live' && <span className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />}
          {stream.status === 'live' ? 'Live' : 'Offline'}
        </span>
        {stream.location && (
          <span className="flex items-center gap-1.5 text-stone-400 text-sm">
            <MapPin size={14} /> {stream.location}
          </span>
        )}
        {stream.viewerCount > 0 && (
          <span className="flex items-center gap-1.5 text-stone-400 text-sm">
            <Users size={14} /> {stream.viewerCount.toLocaleString()} watching
          </span>
        )}
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
        {/* Main video + info */}
        <div className="xl:col-span-2 space-y-6">
          <VideoPlayer hlsUrl={stream.hlsUrl} thumbnailUrl={stream.thumbnailUrl} />
          <div className="space-y-3">
            <h1 className="text-3xl font-black text-white">{stream.name}</h1>
            {stream.description && (
              <p className="text-stone-400 leading-relaxed">{stream.description}</p>
            )}
          </div>

          {/* Wildlife facts panel */}
          <div className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-4">
            <h3 className="font-bold text-gold text-sm uppercase tracking-widest">Burrowing Owl Facts</h3>
            <ul className="space-y-3 text-sm text-stone-300 leading-relaxed">
              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>Burrowing owls are the official city bird of Cape Coral, FL.</li>
              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>Unlike most owls, they are active during the day and nest underground.</li>
              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>They are a Species of Special Concern in Florida — development threatens their habitat.</li>
              <li className="flex gap-3"><span className="text-teal font-bold shrink-0">•</span>CCFW monitors over 2,000 active burrow sites across Cape Coral.</li>
            </ul>
          </div>
        </div>

        {/* Sidebar: Donate */}
        <div className="space-y-6">
          <div className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-4">
            <h3 className="font-bold text-white">Support the Cameras</h3>
            <p className="text-stone-400 text-sm leading-relaxed">
              These cameras run 24/7 thanks to donations from wildlife lovers like you.
            </p>
          </div>
          {campaigns.slice(0, 1).map((c) => (
            <DonationCard key={c.id} campaign={c} />
          ))}
        </div>
      </div>
    </div>
  );
}