"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { RefreshCw, Globe } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ObservatoryMap } from "./observatory-map";

// News item interface matching the API response
interface NewsItem {
  id: number;
  title: string;
  displayDate: string;
  timestamp: string;
  source: string;
  description: string | null;
  category: string | null;
  url: string;
}

export function ObservatoryView() {
  const [news, setNews] = useState<NewsItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedCountry, setSelectedCountry] = useState<string | null>(null);

  // Fetch news data
  const fetchNews = async () => {
    setLoading(true);
    
    try {
      const response = await fetch('/api/news?limit=50');
      if (!response.ok) {
        throw new Error('Failed to fetch news');
      }
      
      const data = await response.json();
      setNews(data);
      setError(null);
    } catch (err) {
      setError('Failed to fetch news');
      console.error('Error fetching news:', err);
    } finally {
      setLoading(false);
    }
  };

  // Fetch news on component mount
  useEffect(() => {
    fetchNews();
  }, []);

  // Extract countries from news data (simplified version)
  const extractCountries = (newsItems: NewsItem[]) => {
    // This is a simplified implementation
    // In a real app, we would use NLP or a more sophisticated technique
    const countries = [
      'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China', 
      'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain'
    ];
    
    const result: Record<string, NewsItem[]> = {};
    
    newsItems.forEach(item => {
      countries.forEach(country => {
        if (
          (item.title && item.title.includes(country)) || 
          (item.description && item.description.includes(country))
        ) {
          if (!result[country]) {
            result[country] = [];
          }
          result[country].push(item);
        }
      });
    });
    
    return result;
  };

  // Handle country selection on the map
  const handleCountrySelect = (country: string) => {
    setSelectedCountry(selectedCountry === country ? null : country);
  };

  // Get news filtered by selected country
  const getFilteredNews = () => {
    if (!selectedCountry) return news;
    
    const countriesMap = extractCountries(news);
    return countriesMap[selectedCountry] || [];
  };

  // Loading state
  if (loading) {
    return (
      <div className="w-full h-[calc(100vh-8rem)] flex items-center justify-center">
        <RefreshCw className="h-10 w-10 animate-spin text-gray-400" />
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="w-full h-[calc(100vh-8rem)] flex flex-col items-center justify-center">
        <p className="text-red-500 mb-4">{error}</p>
        <Button onClick={fetchNews}>Retry</Button>
      </div>
    );
  }

  const filteredNews = getFilteredNews();
  const countriesMap = extractCountries(news);
  const countries = Object.keys(countriesMap);

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex flex-col space-y-6">
        <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg">
          <CardHeader className="pb-2 border-b border-gray-100">
            <div className="flex justify-between items-center">
              <CardTitle className="text-2xl font-semibold text-gray-800 flex items-center gap-2">
                <Globe className="h-6 w-6 text-gray-600" />
                News Observatory
              </CardTitle>
              <Button
                variant="ghost"
                size="sm"
                onClick={fetchNews}
                className="h-8 px-2 rounded-full"
              >
                <RefreshCw className="h-4 w-4 mr-2" />
                Refresh
              </Button>
            </div>
          </CardHeader>
        </Card>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* News Feed Section */}
          <div className="lg:col-span-2">
            <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
              <CardHeader className="pb-2 border-b border-gray-100">
                <CardTitle className="text-lg font-semibold text-gray-800">
                  {selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
                  <span className="text-sm font-normal ml-2 text-gray-500">
                    ({filteredNews.length} articles)
                  </span>
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4">
                <div className="space-y-4 max-h-[calc(100vh-20rem)] overflow-y-auto pr-2">
                  {filteredNews.length === 0 ? (
                    <p className="text-gray-500 text-center py-10">No news available</p>
                  ) : (
                    filteredNews.map(item => (
                      <div
                        key={item.id}
                        className="p-4 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200"
                        onClick={() => window.open(item.url, '_blank')}
                      >
                        <div className="flex flex-col gap-1">
                          <div className="flex items-center justify-between text-xs">
                            <span className="text-gray-500">{item.displayDate}</span>
                            <span className="text-gray-500">{item.source}</span>
                          </div>
                          <h3 className="text-md font-medium text-gray-800" title={item.title}>
                            {item.title}
                          </h3>
                          <p className="text-sm text-gray-600 mt-1">
                            {item.description}
                          </p>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Map Section */}
          <div className="lg:col-span-1">
            <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
              <CardHeader className="pb-2 border-b border-gray-100">
                <CardTitle className="text-lg font-semibold text-gray-800">
                  World Map
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4">
                {/* Map Placeholder */}
                <div 
                  className="bg-gray-100 rounded-lg h-[300px] mb-4"
                >
                  <ObservatoryMap 
                    countries={Object.entries(countriesMap).map(([name, items]) => ({
                      name,
                      count: items.length
                    }))}
                    onCountrySelect={handleCountrySelect}
                    selectedCountry={selectedCountry}
                  />
                </div>

                {/* Countries List */}
                <div className="mt-4">
                  <h4 className="text-md font-medium mb-2">Mentioned Countries:</h4>
                  {countries.length === 0 ? (
                    <p className="text-gray-500">No countries detected</p>
                  ) : (
                    <div className="flex flex-wrap gap-2">
                      {countries.map(country => (
                        <Button
                          key={country}
                          variant={selectedCountry === country ? "default" : "outline"}
                          size="sm"
                          onClick={() => handleCountrySelect(country)}
                          className="text-xs"
                        >
                          {country} ({countriesMap[country].length})
                        </Button>
                      ))}
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}