'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ExternalDataSource, dataSourceTypes, dataSourceStatuses } from '../types';
import { ExternalDataAction } from './externalDataReducer';
import {
  Database,
  Eye,
  Edit,
  Trash2,
  Cloud,
  Code,
  Upload,
  Wifi,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Clock,
  Link,
} from 'lucide-react';

interface DataSourceCardProps {
  dataSource: ExternalDataSource;
  onView: (dataSource: ExternalDataSource) => void;
  onEdit: (dataSource: ExternalDataSource) => void;
  onDelete: (id: string) => void;
}

export function DataSourceCard({ dataSource, onView, onEdit, onDelete }: DataSourceCardProps) {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case '正常':
        return <CheckCircle className="w-4 h-4 text-success" />;
      case '异常':
        return <XCircle className="w-4 h-4 text-destructive" />;
      case '离线':
        return <Clock className="w-4 h-4 text-muted-foreground" />;
      case '待配置':
        return <AlertTriangle className="w-4 h-4 text-warning" />;
      default:
        return <Clock className="w-4 h-4 text-muted-foreground" />;
    }
  };

  const getAccessMethodIcon = (method: string) => {
    switch (method) {
      case 'API对接':
        return <Link className="w-4 h-4" />;
      case 'FTP传输':
        return <Upload className="w-4 h-4" />;
      case 'WebSocket':
        return <Wifi className="w-4 h-4" />;
      case '手动上传':
        return <Upload className="w-4 h-4" />;
      default:
        return <Database className="w-4 h-4" />;
    }
  };

  const getStatusColor = (status: string) => {
    const statusConfig = dataSourceStatuses.find(s => s.key === status);
    return statusConfig?.color || '#6b7280';
  };

  const getTypeColor = (type: string) => {
    const typeConfig = dataSourceTypes.find(t => t.key === type);
    return typeConfig?.color || '#6b7280';
  };

  return (
    <Card className="p-6 bg-card hover:bg-muted/50 transition-colors">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div
            className="w-10 h-10 rounded-lg flex items-center justify-center"
            style={{ backgroundColor: `${getTypeColor(dataSource.type)}20` }}
          >
            <Cloud
              className="w-5 h-5"
              style={{ color: getTypeColor(dataSource.type) }}
            />
          </div>
          <div>
            <h3 className="font-semibold text-foreground">{dataSource.name}</h3>
            <p className="text-sm text-muted-foreground">{dataSource.provider}</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {getStatusIcon(dataSource.status)}
          <Badge
            variant="outline"
            className="font-light"
            style={{
              borderColor: getStatusColor(dataSource.status),
              color: getStatusColor(dataSource.status),
            }}
          >
            {dataSource.status}
          </Badge>
        </div>
      </div>

      <div className="space-y-3 mb-4">
        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">数据类型</span>
          <Badge
            variant="outline"
            className="font-light"
            style={{
              borderColor: getTypeColor(dataSource.type),
              color: getTypeColor(dataSource.type),
            }}
          >
            {dataSource.type}
          </Badge>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">接入方式</span>
          <div className="flex items-center gap-2">
            {getAccessMethodIcon(dataSource.accessMethod)}
            <span className="text-sm">{dataSource.accessMethod}</span>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">更新频率</span>
          <span className="text-sm">{dataSource.updateFrequency}</span>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">数据量</span>
          <span className="text-sm font-medium">{dataSource.dataPoints.toLocaleString()}</span>
        </div>

        <div className="flex items-center justify-between">
          <span className="text-sm text-muted-foreground">最后更新</span>
          <span className="text-sm">{dataSource.lastUpdateTime}</span>
        </div>
      </div>

      <div className="mb-4">
        <p className="text-sm text-muted-foreground line-clamp-2">
          {dataSource.description}
        </p>
      </div>

      <div className="flex flex-wrap gap-1 mb-4">
        {dataSource.dataFields.slice(0, 3).map((field, index) => (
          <Badge
            key={index}
            variant="secondary"
            className="text-xs font-light"
          >
            {field}
          </Badge>
        ))}
        {dataSource.dataFields.length > 3 && (
          <Badge variant="secondary" className="text-xs font-light">
            +{dataSource.dataFields.length - 3}
          </Badge>
        )}
      </div>

      <div className="flex gap-2 pt-4 border-t border-border">
        <Button
          variant="outline"
          size="sm"
          onClick={() => onView(dataSource)}
          className="flex-1"
        >
          <Eye className="w-4 h-4 mr-1" />
          查看详情
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => onEdit(dataSource)}
          className="flex-1"
        >
          <Edit className="w-4 h-4 mr-1" />
          编辑
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => onDelete(dataSource.id)}
          className="text-destructive hover:text-destructive hover:bg-destructive/10"
        >
          <Trash2 className="w-4 h-4" />
        </Button>
      </div>
    </Card>
  );
}