import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
  Rocket,
  AlertTriangle,
  ArrowRight,
  Cloud,
  Shield,
  Clock3,
  Globe,
  Database,
  Server,
  Monitor,
  Activity,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import type { AlertEventRecord, CertExpiryRecord } from '@/types';

/** 仪表盘卡片数据类型 — 与 Dashboard API 响应对齐 */
export interface DashboardRelease {
  id: number | string;
  status: string;
  app_name: string;
  version: string;
  environment?: string;
  commit_id?: string;
  [key: string]: unknown;
}

export interface DashboardCluster {
  id: number | string;
  code?: string;
  name: string;
  status: string;
  cpu_usage?: number;
  memory_usage?: number;
  node_count?: number;
  pod_count?: number;
  ingress_count?: number;
  deployment_count?: number;
  service_count?: number;
  [key: string]: unknown;
}

export interface DashboardAutomationStats {
  cron_job_count?: number;
  script_count?: number;
  today_executions?: number;
  success_rate?: number;
}

export interface DashboardOpsStats {
  domain_count?: number;
  site_task_count?: number;
  middleware_count?: number;
  snmp_device_count?: number;
  monitor_target_count?: number;
}

export interface DashboardPipelineStats {
  today_count?: number;
  success?: number;
  failed?: number;
  running?: number;
}

/**
 * DashboardRecent - 优化后的仪表盘底部卡片组件
 *
 * 优化点：
 * 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
 * 2. 统一的状态指示器样式
 * 3. 更好的 hover 效果和过渡动画
 * 4. ScrollArea 使用 scrollbar-thin 类
 * 5. 空状态显示更友好
 */

// Status dot component
function StatusDot({ severity }: { severity: string }) {
  return (
    <div
      className={cn(
        'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
        severity === 'critical' && 'bg-[var(--dg-red)]',
        severity === 'warning' && 'bg-[var(--dg-yellow)]',
        severity === 'info' && 'bg-[var(--dg-blue)]',
      )}
    />
  );
}

// Severity badge
function SeverityBadge({ severity }: { severity: string }) {
  const { t } = useTranslation();
  return (
    <Badge
      variant="outline"
      className={cn(
        'text-xs font-medium',
        severity === 'critical' && 'dg-badge-red border',
        severity === 'warning' && 'dg-badge-yellow border',
        severity === 'info' && 'dg-badge-blue border',
      )}
    >
      {severity === 'critical' ? t('common.error') : severity === 'warning' ? t('common.warning') : t('common.info')}
    </Badge>
  );
}

export function AlertMessagesCard({ alerts }: { alerts: AlertEventRecord[] }) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.alerts.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.alerts.description')}</CardDescription>
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="dg-btn-ghost text-xs"
            onClick={() => navigate('/alerts')}
          >
            {t('dashboard.alerts.viewAll')}
            <ArrowRight className="h-3.5 w-3.5 ml-1" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[320px] scrollbar-thin">
          {recentAlerts.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
              <AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
              <p className="text-sm">{t('dashboard.alerts.empty')}</p>
              <p className="text-xs mt-1 opacity-60">{t('dashboard.alerts.emptyHint')}</p>
            </div>
          ) : (
            <div className="space-y-1.5 pr-2">
              {recentAlerts.map((alert) => (
                <div
                  key={alert.id}
                  className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
                  onClick={() => navigate('/alert-center')}
                >
                  <StatusDot severity={alert.severity || 'info'} />
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
                        {alert.rule_name}
                      </span>
                      <SeverityBadge severity={alert.severity || 'info'} />
                    </div>
                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
                    <p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
                  </div>
                  <span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
                    {alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
                  </span>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

export function CertificateExpiryCard({ expCerts }: { expCerts: CertExpiryRecord[] }) {
  const { t } = useTranslation();
  const expiringDomains = (expCerts ?? [])
    .map((d) => ({
      ...d,
      daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
    }))
    .sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);

  const criticalCount = expiringDomains.filter((d) => d.daysUntilExpiry < 30).length;
  const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between flex-wrap gap-2">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.certificates.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.certificates.description')}</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            {criticalCount > 0 && (
              <Badge className="dg-badge-red border">
                <AlertTriangle className="h-3 w-3 mr-1" />
                {criticalCount} {t('dashboard.certificates.expiringSoon')}
              </Badge>
            )}
            {warningCount > 0 && (
              <Badge className="dg-badge-yellow border">
                {warningCount} {t('dashboard.certificates.expiringIn30Days')}
              </Badge>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[280px] scrollbar-thin">
          {expiringDomains.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
              <Shield className="h-10 w-10 mb-3 opacity-30" />
              <p className="text-sm">{t('dashboard.certificates.empty')}</p>
            </div>
          ) : (
            <div className="space-y-1.5 pr-2">
              {expiringDomains.map((domain) => (
                <div
                  key={domain.id}
                  className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
                >
                  <div className="flex items-center gap-3 min-w-0">
                    <div
                      className={cn(
                        'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
                        domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
                        domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
                        'bg-[var(--dg-green)]/10'
                      )}
                    >
                      <Shield className={cn(
                        'h-4 w-4',
                        domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
                        domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
                        'text-[var(--dg-green)]'
                      )} />
                    </div>
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
                      <p className="text-xs text-[var(--dg-text-muted)]">{t('dashboard.certificates.expireDate')}: {domain.expire_date?.substring(0, 10)}</p>
                    </div>
                  </div>
                  <Badge
                    variant="outline"
                    className={cn(
                      'text-xs flex-shrink-0',
                      domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
                      domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
                      'dg-badge-green border'
                    )}
                  >
                    {domain.daysUntilExpiry < 0 ? t('dashboard.certificates.expired') : `${domain.daysUntilExpiry} ${t('dashboard.certificates.days')}`}
                  </Badge>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

export function ReleaseHistoryCard({ releases }: { releases: DashboardRelease[] }) {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const releaseList = releases?.slice(0, 5) ?? [];

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.releases.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.releases.description')}</CardDescription>
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="dg-btn-ghost text-xs"
            onClick={() => navigate('/pipelines')}
          >
            {t('dashboard.releases.viewAll')}
            <ArrowRight className="h-3.5 w-3.5 ml-1" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {releaseList.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
            <Rocket className="h-10 w-10 mb-3 opacity-30" />
            <p className="text-sm">{t('dashboard.releases.empty')}</p>
          </div>
        ) : (
          <div className="space-y-2">
            {releaseList.map((release) => (
              <div
                key={release.id}
                className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
              >
                <div
                  className={cn(
                    'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
                    release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
                    release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
                    release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
                    'bg-[var(--dg-yellow)]/10'
                  )}
                >
                  <Rocket className={cn(
                    'h-4 w-4',
                    release.status === 'success' ? 'text-[var(--dg-green)]' :
                    release.status === 'failed' ? 'text-[var(--dg-red)]' :
                    release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
                    'text-[var(--dg-yellow)]'
                  )} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
                    <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
                      {release.version}
                    </Badge>
                  </div>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
                    <span className="text-xs text-[var(--dg-border)]">·</span>
                    <span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
                  </div>
                </div>
                <Badge
                  variant="outline"
                  className={cn(
                    'text-xs flex-shrink-0',
                    release.status === 'success' ? 'dg-badge-green border' :
                    release.status === 'failed' ? 'dg-badge-red border' :
                    release.status === 'deploying' ? 'dg-badge-blue border' :
                    'dg-badge-yellow border'
                  )}
                >
                  {release.status === 'success' ? t('dashboard.releases.success') :
                   release.status === 'failed' ? t('dashboard.releases.failed') :
                   release.status === 'deploying' ? t('dashboard.releases.deploying') :
                   release.status === 'rolled_back' ? t('dashboard.releases.rolledBack') : t('dashboard.releases.building')}
                </Badge>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

/** 运维概览 — 资产 / 监控 / 任务快捷入口 // Logan.Li */
export function OpsOverviewCard({
  automation,
  ops,
  serverCount,
  hostMonitorCount,
  firingAlerts,
}: {
  automation?: DashboardAutomationStats;
  ops?: DashboardOpsStats;
  serverCount?: number;
  hostMonitorCount?: number;
  firingAlerts?: number;
}) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const tiles = [
    { key: 'servers', label: t('dashboard.ops.servers'), value: serverCount ?? 0, icon: Server, path: '/servers', color: 'text-[var(--dg-blue)]' },
    { key: 'domains', label: t('dashboard.ops.domains'), value: ops?.domain_count ?? 0, icon: Globe, path: '/domains', color: 'text-[var(--dg-cyan)]' },
    { key: 'host', label: t('dashboard.ops.hostMonitor'), value: hostMonitorCount ?? serverCount ?? 0, icon: Monitor, path: '/host-monitor', color: 'text-[var(--dg-green)]' },
    { key: 'mw', label: t('dashboard.ops.middleware'), value: ops?.middleware_count ?? 0, icon: Database, path: '/monitor-center?tab=middleware', color: 'text-[var(--dg-red)]' },
    { key: 'site', label: t('dashboard.ops.siteProbes'), value: ops?.site_task_count ?? 0, icon: Activity, path: '/monitor-center?tab=site', color: 'text-[var(--dg-yellow)]' },
    { key: 'cron', label: t('dashboard.ops.cronJobs'), value: automation?.cron_job_count ?? 0, icon: Clock3, path: '/cronjobs', color: 'text-[var(--dg-purple)]' },
  ];

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
          </div>
          <Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
            {t('menu.aiAgentCli')}
            <ArrowRight className="h-3.5 w-3.5 ml-1" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
          {tiles.map((tile) => (
            <button
              key={tile.key}
              type="button"
              onClick={() => navigate(tile.path)}
              className="flex items-center gap-2.5 p-2.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all text-left"
            >
              <tile.icon className={cn('h-4 w-4 shrink-0', tile.color)} />
              <div className="min-w-0">
                <div className="text-base font-bold text-[var(--dg-text-primary)] leading-none">{tile.value}</div>
                <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5 truncate">{tile.label}</div>
              </div>
            </button>
          ))}
        </div>
        <div className="flex items-center justify-between text-xs px-1 pt-1 border-t border-[var(--dg-border)]">
          <span className="text-[var(--dg-text-muted)]">
            {t('dashboard.ops.todayExecutions')}: <span className="text-[var(--dg-text-primary)] font-medium">{automation?.today_executions ?? 0}</span>
          </span>
          <button type="button" className="text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => navigate('/alert-center')}>
            {t('dashboard.ops.firingAlerts')}: <span className={cn('font-medium', (firingAlerts ?? 0) > 0 ? 'text-[var(--dg-red)]' : 'text-[var(--dg-text-primary)]')}>{firingAlerts ?? 0}</span>
          </button>
        </div>
      </CardContent>
    </Card>
  );
}

export function KubernetesClusterCard({ clusters }: { clusters: DashboardCluster[] }) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <Card className="dg-card dg-card-hover">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.clusters.title')}</CardTitle>
            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.clusters.description')}</CardDescription>
          </div>
          <Button
            variant="ghost"
            size="sm"
            className="dg-btn-ghost text-xs"
            onClick={() => navigate('/kubernetes')}
          >
            {t('dashboard.clusters.viewAll')}
            <ArrowRight className="h-3.5 w-3.5 ml-1" />
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {clusters.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
            <Cloud className="h-10 w-10 mb-3 opacity-30" />
            <p className="text-sm">{t('dashboard.clusters.empty')}</p>
          </div>
        ) : (
          <div className="space-y-3">
            {clusters.map((cluster) => {
              const cpuUsage = Number(cluster.cpu_usage ?? 0);
              const memoryUsage = Number(cluster.memory_usage ?? 0);
              const hasUsage = cpuUsage > 0 || memoryUsage > 0;
              const metrics = hasUsage
                ? [
                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
                    { label: t('dashboard.clusters.cpu'), value: `${cpuUsage.toFixed(1)}%` },
                    { label: t('dashboard.clusters.memory'), value: `${memoryUsage.toFixed(1)}%` },
                  ]
                : [
                    { label: t('dashboard.clusters.nodes'), value: cluster.node_count ?? 0 },
                    { label: t('dashboard.clusters.pods'), value: cluster.pod_count ?? 0 },
                    { label: t('dashboard.clusters.ingress'), value: cluster.ingress_count ?? 0 },
                    { label: t('dashboard.clusters.deployments'), value: cluster.deployment_count ?? 0 },
                  ];
              return (
                <div
                  key={cluster.id}
                  className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
                  onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
                >
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2.5">
                      <Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
                    </div>
                    <Badge
                      variant="outline"
                      className={cn(
                        'text-xs',
                        cluster.status === 'healthy' ? 'dg-badge-green border' :
                        cluster.status === 'warning' ? 'dg-badge-yellow border' :
                        'dg-badge-red border'
                      )}
                    >
                      {cluster.status === 'healthy' ? t('dashboard.clusters.healthy') : cluster.status === 'warning' ? t('dashboard.clusters.warning') : t('dashboard.clusters.error')}
                    </Badge>
                  </div>
                  <div className="grid grid-cols-4 gap-2 text-center">
                    {metrics.map((item) => (
                      <div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
                        <div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
                        <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </CardContent>
    </Card>
  );
}