"use client";

import React, { useState, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { RefreshCw, AlertTriangle, Cloud, Construction } from "lucide-react";
import { apiClient } from "@/lib/api/client";
import { DashboardElement } from "@/components/admin/dashboard/types";

// 알림 타입
type AlertType = "accident" | "weather" | "construction";

// 알림 인터페이스
interface Alert {
  id: string;
  type: AlertType;
  severity: "high" | "medium" | "low";
  title: string;
  location: string;
  description: string;
  timestamp: string;
}

interface RiskAlertWidgetProps {
  element?: DashboardElement;
}

export default function RiskAlertWidget({ element }: RiskAlertWidgetProps) {
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [filter, setFilter] = useState<AlertType | "all">("all");
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
  const [newAlertIds, setNewAlertIds] = useState<Set<string>>(new Set());

  // 데이터 로드 (백엔드 캐시 조회)
  const loadData = async () => {
    setIsRefreshing(true);
    try {
      // 백엔드 API 호출 (캐시된 데이터)
      const response = await apiClient.get<{ 
        success: boolean; 
        data: Alert[]; 
        count: number;
        lastUpdated?: string;
        cached?: boolean;
      }>("/risk-alerts");

      if (response.data.success && response.data.data) {
        const newData = response.data.data;
        
        // 새로운 알림 감지
        const oldIds = new Set(alerts.map(a => a.id));
        const newIds = new Set<string>();
        newData.forEach(alert => {
          if (!oldIds.has(alert.id)) {
            newIds.add(alert.id);
          }
        });
        
        setAlerts(newData);
        setNewAlertIds(newIds);
        setLastUpdated(new Date());
        
        // 3초 후 새 알림 애니메이션 제거
        if (newIds.size > 0) {
          setTimeout(() => setNewAlertIds(new Set()), 3000);
        }
      } else {
        console.error("❌ 리스크 알림 데이터 로드 실패");
        setAlerts([]);
      }
    } catch (error: any) {
      console.error("❌ 리스크 알림 API 오류:", error.message);
      // API 오류 시 빈 배열 유지
      setAlerts([]);
    } finally {
      setIsRefreshing(false);
    }
  };

  // 강제 새로고침 (실시간 API 호출)
  const forceRefresh = async () => {
    setIsRefreshing(true);
    try {
      // 강제 갱신 API 호출 (실시간 데이터)
      const response = await apiClient.post<{ 
        success: boolean; 
        data: Alert[]; 
        count: number;
        message?: string;
      }>("/risk-alerts/refresh", {});

      if (response.data.success && response.data.data) {
        const newData = response.data.data;
        
        // 새로운 알림 감지
        const oldIds = new Set(alerts.map(a => a.id));
        const newIds = new Set<string>();
        newData.forEach(alert => {
          if (!oldIds.has(alert.id)) {
            newIds.add(alert.id);
          }
        });
        
        setAlerts(newData);
        setNewAlertIds(newIds);
        setLastUpdated(new Date());
        
        // 3초 후 새 알림 애니메이션 제거
        if (newIds.size > 0) {
          setTimeout(() => setNewAlertIds(new Set()), 3000);
        }
      } else {
        console.error("❌ 리스크 알림 강제 갱신 실패");
      }
    } catch (error: any) {
      console.error("❌ 리스크 알림 강제 갱신 오류:", error.message);
    } finally {
      setIsRefreshing(false);
    }
  };

  useEffect(() => {
    loadData();
    // 1분마다 자동 새로고침 (60000ms)
    const interval = setInterval(loadData, 60000);
    return () => clearInterval(interval);
  }, []);

  // 필터링된 알림
  const filteredAlerts = filter === "all" ? alerts : alerts.filter((alert) => alert.type === filter);

  // 알림 타입별 아이콘
  const getAlertIcon = (type: AlertType) => {
    switch (type) {
      case "accident":
        return <AlertTriangle className="h-5 w-5 text-destructive" />;
      case "weather":
        return <Cloud className="h-5 w-5 text-primary" />;
      case "construction":
        return <Construction className="h-5 w-5 text-warning" />;
    }
  };

  // 알림 타입별 한글명
  const getAlertTypeName = (type: AlertType) => {
    switch (type) {
      case "accident":
        return "교통사고";
      case "weather":
        return "날씨특보";
      case "construction":
        return "도로공사";
    }
  };

  // 시간 포맷
  const formatTime = (isoString: string) => {
    const date = new Date(isoString);
    const now = new Date();
    const diffMinutes = Math.floor((now.getTime() - date.getTime()) / 60000);

    if (diffMinutes < 1) return "방금 전";
    if (diffMinutes < 60) return `${diffMinutes}분 전`;
    const diffHours = Math.floor(diffMinutes / 60);
    if (diffHours < 24) return `${diffHours}시간 전`;
    return `${Math.floor(diffHours / 24)}일 전`;
  };

  // 통계 계산
  const stats = {
    accident: alerts.filter((a) => a.type === "accident").length,
    weather: alerts.filter((a) => a.type === "weather").length,
    construction: alerts.filter((a) => a.type === "construction").length,
    high: alerts.filter((a) => a.severity === "high").length,
  };

  return (
    <div className="flex h-full w-full flex-col gap-4 overflow-hidden bg-background p-4">
      {/* 헤더 */}
      <div className="flex items-center justify-between border-b pb-3">
        <div className="flex items-center gap-2">
          <AlertTriangle className="h-5 w-5 text-destructive" />
          <h3 className="text-lg font-semibold">{element?.customTitle || "리스크 / 알림"}</h3>
          {stats.high > 0 && (
            <Badge variant="destructive">긴급 {stats.high}건</Badge>
          )}
        </div>
        <div className="flex items-center gap-2">
          {lastUpdated && newAlertIds.size > 0 && (
            <Badge variant="secondary" className="animate-pulse">
              새 알림 {newAlertIds.size}건
            </Badge>
          )}
          {lastUpdated && (
            <span className="text-xs text-muted-foreground">
              {lastUpdated.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}
            </span>
          )}
          <Button variant="ghost" size="sm" onClick={forceRefresh} disabled={isRefreshing} title="실시간 데이터 갱신">
            <RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
          </Button>
        </div>
      </div>

      {/* 통계 카드 */}
      <div className="grid grid-cols-3 gap-3">
        <Card
          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
            filter === "accident" ? "bg-destructive/10" : ""
          }`}
          onClick={() => setFilter(filter === "accident" ? "all" : "accident")}
        >
          <div className="text-xs text-muted-foreground">교통사고</div>
          <div className="text-2xl font-bold text-destructive">{stats.accident}건</div>
        </Card>
        <Card
          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
            filter === "weather" ? "bg-primary/10" : ""
          }`}
          onClick={() => setFilter(filter === "weather" ? "all" : "weather")}
        >
          <div className="text-xs text-muted-foreground">날씨특보</div>
          <div className="text-2xl font-bold text-primary">{stats.weather}건</div>
        </Card>
        <Card
          className={`cursor-pointer p-3 transition-all hover:shadow-md ${
            filter === "construction" ? "bg-warning/10" : ""
          }`}
          onClick={() => setFilter(filter === "construction" ? "all" : "construction")}
        >
          <div className="text-xs text-muted-foreground">도로공사</div>
          <div className="text-2xl font-bold text-warning">{stats.construction}건</div>
        </Card>
      </div>

      {/* 필터 상태 표시 */}
      {filter !== "all" && (
        <div className="flex items-center gap-2">
          <Badge variant="outline">
            {getAlertTypeName(filter)} 필터 적용 중
          </Badge>
          <Button
            variant="link"
            size="sm"
            onClick={() => setFilter("all")}
            className="h-auto p-0 text-xs"
          >
            전체 보기
          </Button>
        </div>
      )}

      {/* 알림 목록 */}
      <div className="flex-1 space-y-2 overflow-y-auto">
        {filteredAlerts.length === 0 ? (
          <Card className="p-4 text-center">
            <div className="text-sm text-muted-foreground">알림이 없습니다</div>
          </Card>
        ) : (
          filteredAlerts.map((alert) => (
            <Card 
              key={alert.id} 
              className={`p-3 transition-all duration-300 ${
                newAlertIds.has(alert.id) ? 'bg-accent ring-1 ring-primary' : ''
              }`}
            >
              <div className="flex items-start justify-between gap-2">
                <div className="flex items-start gap-2">
                  {getAlertIcon(alert.type)}
                  <div className="flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <h4 className="text-sm font-semibold">{alert.title}</h4>
                      {newAlertIds.has(alert.id) && (
                        <Badge variant="secondary">
                          NEW
                        </Badge>
                      )}
                      <Badge variant={alert.severity === "high" ? "destructive" : alert.severity === "medium" ? "default" : "secondary"}>
                        {alert.severity === "high" ? "긴급" : alert.severity === "medium" ? "주의" : "정보"}
                      </Badge>
                    </div>
                    <p className="mt-1 text-xs font-medium text-foreground">{alert.location}</p>
                    <p className="mt-1 text-xs text-muted-foreground">{alert.description}</p>
                  </div>
                </div>
              </div>
              <div className="mt-2 text-right text-xs text-muted-foreground">{formatTime(alert.timestamp)}</div>
            </Card>
          ))
        )}
      </div>

      {/* 안내 메시지 */}
      <div className="border-t pt-3 text-center text-xs text-muted-foreground">
        💡 1분마다 자동으로 업데이트됩니다
      </div>
    </div>
  );
}