"use client";

import { useEffect, useState } from "react";
import { Waves, TrendingUp, TrendingDown } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { TideData } from "@/app/api/tides/route";

export default function TideWidget() {
  const [tides, setTides] = useState<TideData[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchTides = async () => {
      try {
        const response = await fetch("/api/tides");
        const data = await response.json();
        setTides(data);
      } catch (error) {
        console.error("Erreur lors du chargement des marées:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchTides();
  }, []);

  if (loading) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="animate-pulse">Chargement des marées...</div>
        </CardContent>
      </Card>
    );
  }

  const todayTide = tides[0];
  const tomorrowTide = tides[1];

  if (!todayTide) {
    return null;
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("fr-FR", { weekday: "short", day: "numeric", month: "short" });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Waves className="h-6 w-6 text-primary" />
          Marées
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-2">Aujourd'hui - {formatDate(todayTide.date)}</p>
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-secondary rounded-xl p-3">
              <div className="flex items-center gap-2 mb-1">
                <TrendingUp className="h-4 w-4 text-primary" />
                <span className="text-sm font-semibold text-primary">Haute mer</span>
              </div>
              <p className="text-lg font-bold">{todayTide.highTide.time}</p>
              <p className="text-xs text-gray-600">{todayTide.highTide.height.toFixed(1)}m</p>
            </div>
            <div className="bg-secondary rounded-xl p-3">
              <div className="flex items-center gap-2 mb-1">
                <TrendingDown className="h-4 w-4 text-primary" />
                <span className="text-sm font-semibold text-primary">Basse mer</span>
              </div>
              <p className="text-lg font-bold">{todayTide.lowTide.time}</p>
              <p className="text-xs text-gray-600">{todayTide.lowTide.height.toFixed(1)}m</p>
            </div>
          </div>
        </div>
        
        {tomorrowTide && (
          <div className="pt-4 border-t border-gray-200">
            <p className="text-sm text-gray-600 mb-2">Demain - {formatDate(tomorrowTide.date)}</p>
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-gray-50 rounded-xl p-3">
                <p className="text-xs text-gray-600 mb-1">Haute mer</p>
                <p className="text-base font-semibold">{tomorrowTide.highTide.time}</p>
              </div>
              <div className="bg-gray-50 rounded-xl p-3">
                <p className="text-xs text-gray-600 mb-1">Basse mer</p>
                <p className="text-base font-semibold">{tomorrowTide.lowTide.time}</p>
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}