"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDistanceToNow } from 'date-fns';
import { fr } from 'date-fns/locale';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { RefreshCw } from 'lucide-react';

interface NewsItem {
  id: number;
  title: string;
  url: string;
  date: string;
  source: string;
  description: string;
  category: string;
  sentiment: {
    score: number | null;
    label: string | null;
  };
  symbols: string[] | null;
  symbol: string | null;
}

// Mock data for testing - remove this in production
const MOCK_NEWS = [
  {
    id: 1,
    title: "New Project Management Features Released",
    url: "#",
    date: "2024-03-20",
    source: "Internal",
    description: "New features added to improve project management workflow",
    category: "Update",
    sentiment: { score: null, label: null },
    symbols: null,
    symbol: null
  },
  {
    id: 2,
    title: "Team Meeting Schedule Changes",
    url: "#",
    date: "2024-03-19",
    source: "Internal",
    description: "Updates to the team meeting schedule",
    category: "Announcement",
    sentiment: { score: null, label: null },
    symbols: null,
    symbol: null
  },
  {
    id: 3,
    title: "Upcoming Training Sessions",
    url: "#",
    date: "2024-03-18",
    source: "Internal",
    description: "Schedule for upcoming training sessions",
    category: "Training",
    sentiment: { score: null, label: null },
    symbols: null,
    symbol: null
  }
];

export function News() {
  console.log('News component mounted');
  const [news, setNews] = useState<NewsItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);
  const [dbStatus, setDbStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');

  const fetchNews = async (isRefresh = false) => {
    console.log('Fetching news...');
    if (isRefresh) setRefreshing(true);
    setLoading(true);
    setDbStatus('connecting');
    
    try {
      console.log('Making API request to /api/news');
      const response = await fetch('/api/news');
      console.log('API response status:', response.status);
      
      if (!response.ok) {
        console.log('API request failed');
        throw new Error('Failed to fetch news');
      }
      
      const data = await response.json();
      console.log('API response data:', data);
      
      if (data.error) {
        console.log('API returned error:', data.error);
        throw new Error(data.error);
      }
      
      // If no news items returned, use mock data for testing
      if (!data.news || data.news.length === 0) {
        console.log('No news items returned, using mock data');
        setNews(MOCK_NEWS);
      } else {
        console.log('Setting news items from API');
        setNews(data.news);
      }
      
      setError(null);
      setDbStatus('connected');
    } catch (err) {
      console.error('Error details:', err);
      setError('Failed to load news. Please try again later.');
      setDbStatus('error');
      console.log('Using mock data due to error');
      setNews(MOCK_NEWS);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  useEffect(() => {
    fetchNews();
  }, []);

  if (loading && !refreshing) {
    return (
      <Card className="w-full">
        <CardHeader>
          <CardTitle>News</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center h-32 space-y-2">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
            <p className="text-sm text-gray-500">
              {dbStatus === 'connecting' ? 'Connecting to database...' : 'Loading news...'}
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="w-full">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>News</CardTitle>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => fetchNews(true)}
            disabled={refreshing}
            className={`${refreshing ? 'animate-spin' : ''}`}
          >
            <RefreshCw className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="text-red-500 space-y-2">
            <p>{error}</p>
            <p className="text-sm text-gray-500">
              {dbStatus === 'error' ? 'Database connection error' : 'Failed to fetch news'}
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="w-full">
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>News</CardTitle>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => fetchNews(true)}
          disabled={refreshing}
          className={`${refreshing ? 'animate-spin' : ''}`}
        >
          <RefreshCw className="h-4 w-4" />
        </Button>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {news.length === 0 ? (
            <div className="text-center text-gray-500 py-8">
              No news available
            </div>
          ) : (
            news.map((item) => (
              <div key={item.id} className="border-b pb-4 last:border-b-0">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <Link 
                      href={item.url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-blue-600 hover:underline font-medium"
                    >
                      {item.title}
                    </Link>
                    <p className="text-sm text-gray-500 mt-1">
                      {item.source} • {formatDistanceToNow(new Date(item.date), { addSuffix: true, locale: fr })}
                    </p>
                    {item.description && (
                      <p className="text-sm text-gray-600 mt-2 line-clamp-2">
                        {item.description.replace(/<[^>]*>/g, '')}
                      </p>
                    )}
                  </div>
                  {item.sentiment.score !== null && (
                    <div className={`ml-4 px-2 py-1 rounded text-sm ${
                      item.sentiment.score > 0 ? 'bg-green-100 text-green-800' :
                      item.sentiment.score < 0 ? 'bg-red-100 text-red-800' :
                      'bg-gray-100 text-gray-800'
                    }`}>
                      {item.sentiment.label || 'Neutral'}
                    </div>
                  )}
                </div>
                {(item.symbols?.length || item.symbol) && (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {item.symbols?.map((symbol, index) => (
                      <span key={index} className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                        {symbol}
                      </span>
                    ))}
                    {item.symbol && !item.symbols?.includes(item.symbol) && (
                      <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                        {item.symbol}
                      </span>
                    )}
                  </div>
                )}
              </div>
            ))
          )}
        </div>
      </CardContent>
    </Card>
  );
}