'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { AlertTriangle } from 'lucide-react';
import { WeatherDataState, WeatherDataAction, getAlertColor } from './weatherDataReducer';

interface WeatherAlertsProps {
  state: WeatherDataState;
  dispatch: React.Dispatch<WeatherDataAction>;
}

export default function WeatherAlerts({ state, dispatch }: WeatherAlertsProps) {
  const unacknowledgedAlerts = state.weatherAlerts.filter(
    alert => !state.acknowledgedAlerts.includes(alert.id)
  );

  const handleAcknowledgeAlert = (alertId: string) => {
    dispatch({ type: 'ACKNOWLEDGE_ALERT', payload: alertId });
  };

  const handleAcknowledgeAll = () => {
    dispatch({ type: 'ACKNOWLEDGE_ALL_ALERTS' });
  };

  if (unacknowledgedAlerts.length === 0) {
    return null;
  }

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-sm font-medium text-orange-800 dark:text-orange-200">
          天气预警 ({unacknowledgedAlerts.length})
        </h3>
        {unacknowledgedAlerts.length > 1 && (
          <Button
            size="sm"
            variant="outline"
            onClick={handleAcknowledgeAll}
            className="text-xs"
          >
            全部知晓
          </Button>
        )}
      </div>

      {unacknowledgedAlerts.map((alert) => (
        <Card
          key={alert.id}
          className="p-4 border-l-4 border-l-orange-500 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800"
        >
          <div className="flex items-start gap-4">
            <AlertTriangle className="w-6 h-6 text-orange-600 flex-shrink-0 mt-0.5" />
            <div className="flex-1">
              <div className="flex items-center gap-3 mb-2">
                <Badge className={`${getAlertColor(alert.level)} text-white font-light`}>
                  {alert.level}
                </Badge>
                <Badge variant="outline" className="font-light">{alert.type}</Badge>
                <span className="text-xs text-muted-foreground">{alert.time}</span>
              </div>
              <p className="text-sm mb-2 text-orange-800 dark:text-orange-200">{alert.message}</p>
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <span>影响地块:</span>
                {alert.affectedFields.map((field, index) => (
                  <Badge key={index} variant="outline" className="font-light">
                    {field}
                  </Badge>
                ))}
              </div>
            </div>
            <Button
              size="sm"
              className="bg-green-600 hover:bg-green-700"
              onClick={() => handleAcknowledgeAlert(alert.id)}
            >
              知晓
            </Button>
          </div>
        </Card>
      ))}
    </div>
  );
}