"use client";

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

interface OwlInfoProps {
  id: string;
}

const OwlInfo: React.FC<OwlInfoProps> = ({ id }) => {
  const [activeTab, setActiveTab] = useState<'facts' | 'habitat' | 'conservation'>('facts');
  
  // Get burrowing owl data based on stream ID
  const getWildlifeData = () => {
    switch (id) {
      case "1":
        return {
          species: "Burrowing Owl",
          scientificName: "Athene cunicularia",
          location: "Cape Coral, FL",
          facts: [
            "Burrowing owls are small, long-legged owls that nest underground in burrows",
            "Unlike most owls, they are active during the day (diurnal)",
            "They stand about 9 inches tall and have bright yellow eyes",
            "The City of Cape Coral has designated the burrowing owl as its official city bird"
          ],
          habitat: "Cape Coral has the largest population of burrowing owls in Florida. They prefer open areas with low vegetation such as prairies, grasslands, and open areas of urban development. CCFW volunteers maintain over 2,500 burrows throughout Cape Coral.",
          conservation: "Burrowing owls are listed as a state-threatened species in Florida. Development of their habitats is the biggest threat to their survival. CCFW works to protect and maintain burrows, educate the public, and collaborate with local authorities to ensure these birds have safe places to nest.",
          ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
        };
      case "2":
        return {
          species: "Burrowing Owl",
          scientificName: "Athene cunicularia",
          location: "Cape Coral, FL",
          facts: [
            "Burrowing owls create underground burrows that can be up to 30 feet long",
            "They often use burrows created by other animals like prairie dogs or armadillos",
            "These owls are known for their distinctive 'bobblehead' behavior when curious",
            "They can live up to 9 years in the wild with proper habitat protection"
          ],
          habitat: "Burrowing owls prefer open, grassy areas with sparse vegetation. They are commonly found in prairies, agricultural fields, and urban areas with suitable open spaces. The owls dig their own burrows or modify existing ones.",
          conservation: "Habitat loss from urban development is the primary threat to burrowing owls. CCFW's burrow maintenance program helps protect existing burrows and creates artificial burrows to support the owl population in Cape Coral.",
          ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
        };
      case "3":
        return {
          species: "Burrowing Owl",
          scientificName: "Athene cunicularia",
          location: "Cape Coral, FL",
          facts: [
            "Burrowing owls are Florida's smallest owl species",
            "They have long legs adapted for walking and running on the ground",
            "Their diet consists mainly of insects, small mammals, and reptiles",
            "They are the only owl species that nests exclusively underground"
          ],
          habitat: "These unique owls inhabit open grasslands, pastures, and urban areas with low vegetation. They are particularly well-adapted to the Florida landscape and have thrived in areas where other wildlife has declined.",
          conservation: "CCFW volunteers monitor and maintain over 2,500 burrows in Cape Coral. The organization's educational programs help the community understand the importance of protecting these threatened birds and their habitats.",
          ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
        };
      default:
        return {
          species: "Burrowing Owl",
          scientificName: "Athene cunicularia",
          location: "Cape Coral, FL",
          facts: [
            "Burrowing owls are the official city bird of Cape Coral",
            "They are diurnal, meaning they are active during the day",
            "These owls have distinctive long legs and bright yellow eyes",
            "CCFW maintains over 2,500 burrows to protect this threatened species"
          ],
          habitat: "Cape Coral provides ideal habitat for burrowing owls with its mix of urban development and open spaces. The city has the largest population of burrowing owls in Florida due to successful conservation efforts.",
          conservation: "Cape Coral Friends of Wildlife works tirelessly to protect burrowing owls through habitat preservation, burrow maintenance, public education, and collaboration with local authorities.",
          ccfwLink: "https://ccfriendsofwildlife.org/burrowing-owls/"
        };
    }
  };
  
  const wildlifeData = getWildlifeData();
  
  return (
    <Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
      <CardHeader className="border-b border-ccfw-teal/20 bg-ccfw-beige/10">
        <CardTitle className="text-ccfw-teal">About {wildlifeData.species}</CardTitle>
        <CardDescription className="text-ccfw-maroon font-medium italic">
          {wildlifeData.scientificName && (
            <>{wildlifeData.scientificName} • </>
          )}
          {wildlifeData.location}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4 pt-4">
        <div className="flex space-x-1 bg-ccfw-beige/10 p-1 rounded-md">
          <Button 
            variant="ghost"
            className={`flex-1 text-xs h-8 ${activeTab === 'facts' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
            onClick={() => setActiveTab('facts')}
          >
            Facts
          </Button>
          <Button 
            variant="ghost"
            className={`flex-1 text-xs h-8 ${activeTab === 'habitat' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
            onClick={() => setActiveTab('habitat')}
          >
            Habitat
          </Button>
          <Button 
            variant="ghost"
            className={`flex-1 text-xs h-8 ${activeTab === 'conservation' ? 'bg-ccfw-teal/20 text-ccfw-teal' : 'text-ccfw-maroon hover:text-ccfw-teal hover:bg-ccfw-teal/10'}`}
            onClick={() => setActiveTab('conservation')}
          >
            Conservation
          </Button>
        </div>
        
        <div className="min-h-[180px]">
          {activeTab === 'facts' && (
            <div className="space-y-2">
              <ul className="list-disc list-inside space-y-2 text-sm text-ccfw-maroon font-medium">
                {wildlifeData.facts.map((fact, index) => (
                  <li key={index}>{fact}</li>
                ))}
              </ul>
            </div>
          )}
          
          {activeTab === 'habitat' && (
            <div className="space-y-2">
              <p className="text-sm text-ccfw-maroon font-medium">{wildlifeData.habitat}</p>
            </div>
          )}
          
          {activeTab === 'conservation' && (
            <div className="space-y-3">
              <p className="text-sm text-ccfw-maroon font-medium">{wildlifeData.conservation}</p>
              
              <div className="bg-ccfw-beige/10 p-3 rounded-md border border-ccfw-teal/20 flex flex-col sm:flex-row items-center gap-3">
                <div className="bg-ccfw-gold/20 p-2 rounded-full">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </div>
                <div className="text-center sm:text-left">
                  <p className="text-sm text-ccfw-maroon font-medium">
                    <span className="font-medium text-ccfw-teal">How you can help:</span> Join the Cape Coral Friends of Wildlife in their mission to preserve and protect these incredible creatures.
                  </p>
                  <a 
                    href="https://ccfriendsofwildlife.org/volunteer/" 
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-xs text-ccfw-teal hover:text-ccfw-coral transition-colors"
                  >
                    Learn about volunteer opportunities
                  </a>
                </div>
              </div>
            </div>
          )}
        </div>
        
        <div className="pt-3 border-t border-ccfw-teal/20 flex justify-between items-center">
          <span className="text-xs text-ccfw-maroon font-medium">Updated daily</span>
          <a 
            href={wildlifeData.ccfwLink} 
            target="_blank"
            rel="noopener noreferrer"
            className="text-ccfw-teal text-xs hover:text-ccfw-coral transition-colors flex items-center gap-1"
          >
            Learn More
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
      </CardContent>
    </Card>
  );
};

export default OwlInfo;
