import React from 'react';
import Link from 'next/link';
import LiveStream from '@/app/components/LiveStream';
import DonationPanel from '@/app/components/DonationPanel';
import OwlInfo from '@/app/components/OwlInfo';
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

// This would come from an API or database in a real app
const livestreamsData = [
  { 
    id: "1", 
    name: "Cape Coral Burrowing Owl", 
    location: "Cape Coral, FL", 
    status: "Live",
    viewers: 128,
    description: "Watch these unique ground-dwelling owls at their burrows in Cape Coral. These protected birds are the official city bird of Cape Coral!"
  },
  { 
    id: "2", 
    name: "Sanibel Island Osprey", 
    location: "Sanibel Island, FL", 
    status: "Live",
    viewers: 86,
    description: "Observe ospreys building nests and hunting for fish around Sanibel Island."
  },
  { 
    id: "3", 
    name: "Everglades Alligator", 
    location: "Everglades National Park, FL", 
    status: "Offline",
    viewers: 0,
    description: "Temporarily offline. Usually shows alligators in their natural habitat in the Everglades."
  },
];

export default function LivestreamPage({ params }: { params: { id: string } }) {
  // Find the stream data based on the ID
  const streamData = livestreamsData.find(stream => stream.id === params.id) || {
    id: params.id,
    name: `Wildlife Livestream ${params.id}`,
    location: "Florida",
    status: "Live",
    viewers: Math.floor(Math.random() * 100) + 50,
    description: "Experience the natural beauty of Florida's wildlife."
  };

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="bg-ccfw-beige/90 backdrop-blur-sm sticky top-0 z-10 border-b border-ccfw-teal/20">
        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div>
            <Button variant="ghost" className="text-ccfw-teal mb-2" asChild>
              <Link href="/">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
                Back to all streams
              </Link>
            </Button>
            <h1 className="text-3xl font-bold text-ccfw-teal">{streamData.name}</h1>
            <p className="text-ccfw-maroon text-sm mt-1">{streamData.location}</p>
          </div>
          <div className="flex items-center gap-3">
            <div className={`h-3 w-3 rounded-full ${streamData.status === 'Live' ? 'bg-ccfw-coral animate-pulse' : 'bg-gray-500'}`}></div>
            <span className="text-sm font-medium text-ccfw-maroon font-semibold">{streamData.status}</span>
          </div>
        </div>
      </header>
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <LiveStream id={streamData.id} />
              
              <div className="mt-6">
                <Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
                  <CardContent className="pt-6">
                    <div className="flex items-start gap-4">
                      <div className="bg-ccfw-teal/10 p-3 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <div>
                        <h3 className="text-lg font-medium text-ccfw-teal mb-2">About this livestream</h3>
                        <p className="text-sm text-ccfw-maroon font-medium">
                          This livestream is provided by Cape Coral Friends of Wildlife, a volunteer organization dedicated to the protection and preservation of local wildlife. These cameras help researchers monitor wildlife behavior while allowing the public to connect with nature.
                        </p>
                        <p className="text-sm mt-2">
                          <a 
                            href={`https://ccfriendsofwildlife.org/burrowing-owls/`} 
                            target="_blank" 
                            rel="noopener noreferrer"
                            className="text-ccfw-teal hover:text-ccfw-coral transition-colors underline"
                          >
                            Learn more about our conservation efforts
                          </a>
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
            <div className="space-y-6">
              <DonationPanel id={streamData.id} />
              <OwlInfo id={streamData.id} />
              
              <Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm overflow-hidden">
                <CardContent className="pt-6">
                  <h3 className="text-lg font-medium text-ccfw-teal mb-4">Get Involved</h3>
                  <ul className="space-y-3">
                    <li className="flex items-center gap-3">
                      <div className="bg-ccfw-gold/20 p-2 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                      </div>
                      <a 
                        href="https://ccfriendsofwildlife.org/volunteer/" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
                      >
                        Volunteer with CCFW
                      </a>
                    </li>
                    <li className="flex items-center gap-3">
                      <div className="bg-ccfw-teal/20 p-2 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                      </div>
                      <a 
                        href="https://ccfriendsofwildlife.org/events-and-programs/" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
                      >
                        Attend an Event
                      </a>
                    </li>
                    <li className="flex items-center gap-3">
                      <div className="bg-ccfw-coral/20 p-2 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-coral" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                      </div>
                      <a 
                        href="mailto:info@ccfriendsofwildlife.org" 
                        className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
                      >
                        Contact CCFW
                      </a>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </main>
      
      <footer className="bg-ccfw-beige/90 text-ccfw-maroon py-8 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-sm">
            &copy; {new Date().getFullYear()} Cape Coral Friends of Wildlife. All rights reserved.
          </p>
          <p className="text-sm mt-2">
            <a 
              href="https://ccfriendsofwildlife.org/" 
              target="_blank" 
              rel="noopener noreferrer"
              className="hover:text-ccfw-teal transition-colors"
            >
              Visit our main website
            </a>
          </p>
        </div>
      </footer>
    </div>
  );
}