'use client'

import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import {
  AlertTriangle,
  ArrowRight,
  CheckCircle2,
  GitBranch,
  HardDrive,
  Lock,
  PackageCheck,
  RefreshCw,
  Rocket,
  Server,
} from 'lucide-react'
import { AppLayout } from '@/components/layout'
import { GlassCard } from '@/components/ui/glass-card'
import {
  apiClient,
  type AwoooIStatusCleanupDashboardSnapshot,
  type BackupDrReadinessMatrixSnapshot,
  type DeliveryClosureWorkbenchSnapshot,
  type GiteaWorkflowRunnerHealthSnapshot,
  type GithubTargetPrivateBackupEvidenceGateSnapshot,
  type RuntimeSurfaceInventorySnapshot,
} from '@/lib/api-client'

type DeliveryTone = 'ok' | 'warn' | 'danger' | 'neutral'

interface DeliveryData {
  statusCleanup: AwoooIStatusCleanupDashboardSnapshot | null
  github: GithubTargetPrivateBackupEvidenceGateSnapshot | null
  gitea: GiteaWorkflowRunnerHealthSnapshot | null
  runtime: RuntimeSurfaceInventorySnapshot | null
  backup: BackupDrReadinessMatrixSnapshot | null
}

interface DeliveryLane {
  id: string
  title: string
  description: string
  percent: number
  status: string
  metric: string
  blockerCount: number
  nextAction: string
  href: string
  tone: DeliveryTone
  Icon: typeof Rocket
}

const SOURCE_COUNT = 5

const EMPTY_DATA: DeliveryData = {
  statusCleanup: null,
  github: null,
  gitea: null,
  runtime: null,
  backup: null,
}

const clampPercent = (value: number | null | undefined) => Math.max(0, Math.min(100, Math.round(value ?? 0)))

const toneColor = (tone: DeliveryTone) => {
  if (tone === 'ok') return '#2f7d54'
  if (tone === 'warn') return '#9a6a22'
  if (tone === 'danger') return '#b2432d'
  return '#706f68'
}

const toneBackground = (tone: DeliveryTone) => {
  if (tone === 'ok') return 'rgba(47, 125, 84, 0.10)'
  if (tone === 'warn') return 'rgba(154, 106, 34, 0.10)'
  if (tone === 'danger') return 'rgba(178, 67, 45, 0.10)'
  return 'rgba(112, 111, 104, 0.10)'
}

const resolveTone = (blockerCount: number, percent: number): DeliveryTone => {
  if (blockerCount > 0) return 'danger'
  if (percent < 80) return 'warn'
  return 'ok'
}

const firstActionRequiredTarget = (data: GithubTargetPrivateBackupEvidenceGateSnapshot | null) =>
  data?.targets.find(target => target.approval_required)?.next_action ?? ''

const firstActionRequiredRunner = (data: GiteaWorkflowRunnerHealthSnapshot | null) =>
  data?.runner_contracts.find(contract => contract.status === 'action_required')?.next_action ?? ''

const firstRuntimeAction = (data: RuntimeSurfaceInventorySnapshot | null) =>
  data?.runtime_surfaces.find(surface => surface.status !== 'manifest_mapped')?.next_action ?? ''

const firstBackupAction = (data: BackupDrReadinessMatrixSnapshot | null) =>
  data?.readiness_rows.find(row => row.overall_readiness === 'blocked' || row.overall_readiness === 'action_required')?.next_action ?? ''

function StatusPill({ tone, label }: { tone: DeliveryTone; label: string }) {
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        minHeight: 26,
        borderRadius: 6,
        padding: '3px 8px',
        background: toneBackground(tone),
        color: toneColor(tone),
        fontSize: 12,
        fontWeight: 700,
        overflowWrap: 'anywhere',
      }}
    >
      {label}
    </span>
  )
}

function ProgressBar({ percent, tone }: { percent: number; tone: DeliveryTone }) {
  return (
    <div
      aria-hidden="true"
      style={{
        height: 8,
        borderRadius: 4,
        background: '#ebe8dd',
        overflow: 'hidden',
      }}
    >
      <div
        style={{
          width: `${percent}%`,
          height: '100%',
          background: toneColor(tone),
          transition: 'width 240ms ease',
        }}
      />
    </div>
  )
}

function MetricTile({
  label,
  value,
  detail,
  tone,
}: {
  label: string
  value: string | number
  detail: string
  tone: DeliveryTone
}) {
  return (
    <GlassCard variant="subtle" padding="sm" data-testid={`delivery-metric-${label}`}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 112 }}>
        <span style={{ fontSize: 12, color: '#706f68', fontWeight: 700 }}>{label}</span>
        <strong style={{ fontFamily: 'var(--font-heading), sans-serif', fontSize: 30, color: '#141413', lineHeight: 1 }}>
          {value}
        </strong>
        <span style={{ fontSize: 12, lineHeight: 1.45, color: toneColor(tone), overflowWrap: 'anywhere' }}>
          {detail}
        </span>
      </div>
    </GlassCard>
  )
}

function LaneCard({ lane, locale }: { lane: DeliveryLane; locale: string }) {
  return (
    <GlassCard variant="default" padding="md" data-testid={`delivery-lane-${lane.id}`}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 230 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div
            style={{
              width: 38,
              height: 38,
              borderRadius: 8,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              background: toneBackground(lane.tone),
              color: toneColor(lane.tone),
              flex: '0 0 auto',
            }}
          >
            <lane.Icon size={19} aria-hidden="true" />
          </div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <h2 style={{ fontSize: 17, fontWeight: 800, color: '#141413', margin: 0, overflowWrap: 'anywhere' }}>
              {lane.title}
            </h2>
            <p style={{ fontSize: 13, lineHeight: 1.5, color: '#706f68', margin: '5px 0 0', overflowWrap: 'anywhere' }}>
              {lane.description}
            </p>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
          <StatusPill tone={lane.tone} label={lane.status} />
          <span style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{lane.percent}%</span>
        </div>
        <ProgressBar percent={lane.percent} tone={lane.tone} />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'center', marginTop: 'auto' }}>
          <span style={{ fontSize: 13, color: '#45443f', lineHeight: 1.45, overflowWrap: 'anywhere' }}>{lane.metric}</span>
          <StatusPill tone={lane.blockerCount > 0 ? 'danger' : 'ok'} label={String(lane.blockerCount)} />
        </div>

        <Link
          href={`/${locale}${lane.href}`}
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            color: '#141413',
            fontWeight: 800,
            fontSize: 13,
            textDecoration: 'none',
          }}
        >
          <ArrowRight size={15} aria-hidden="true" />
          <span>{lane.metric}</span>
        </Link>
      </div>
    </GlassCard>
  )
}

export default function DeliveryPage({ params }: { params: { locale: string } }) {
  const t = useTranslations('delivery')
  const [workbench, setWorkbench] = useState<DeliveryClosureWorkbenchSnapshot | null>(null)
  const [data, setData] = useState<DeliveryData>(EMPTY_DATA)
  const [errors, setErrors] = useState<string[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    const load = async () => {
      setLoading(true)
      setErrors([])
      try {
        const summary = await apiClient.getDeliveryClosureWorkbench()
        if (cancelled) return
        setWorkbench(summary)
        setData(EMPTY_DATA)
        setErrors([])
        setLoading(false)
        return
      } catch {
        // Summary endpoint may not exist until the API release lands; keep the page useful with legacy reads.
      }

      const results = await Promise.allSettled([
        apiClient.getAwoooIStatusCleanupDashboard(),
        apiClient.getGithubTargetPrivateBackupEvidenceGate(),
        apiClient.getGiteaWorkflowRunnerHealth(),
        apiClient.getRuntimeSurfaceInventory(),
        apiClient.getBackupDrReadinessMatrix(),
      ])
      if (cancelled) return

      const nextData: DeliveryData = {
        statusCleanup: results[0].status === 'fulfilled' ? results[0].value : null,
        github: results[1].status === 'fulfilled' ? results[1].value : null,
        gitea: results[2].status === 'fulfilled' ? results[2].value : null,
        runtime: results[3].status === 'fulfilled' ? results[3].value : null,
        backup: results[4].status === 'fulfilled' ? results[4].value : null,
      }
      const nextErrors = results
        .map((result, index) => ({ result, index }))
        .filter(({ result }) => result.status === 'rejected')
        .map(({ index }) => t(`sources.${index}.error`))

      setWorkbench(null)
      setData(nextData)
      setErrors(nextErrors)
      setLoading(false)
    }

    load()
    return () => {
      cancelled = true
    }
  }, [t])

  const lanes = useMemo<DeliveryLane[]>(() => {
    if (workbench) {
      return workbench.lanes.map(lane => {
        const iconMap = {
          release: Rocket,
          github: GitBranch,
          gitea: PackageCheck,
          runtime: Server,
          backup: HardDrive,
        }
        const metric =
          lane.metric.kind === 'blocked_gate'
            ? t('lanes.release.metric', { blocked: lane.metric.blocked })
            : lane.metric.kind === 'private_backup_verified'
              ? t('lanes.github.metric', { verified: lane.metric.verified, total: lane.metric.total })
              : lane.metric.kind === 'workflow_count'
                ? t('lanes.gitea.metric', { count: lane.metric.count })
                : lane.metric.kind === 'surface_count'
                  ? t('lanes.runtime.metric', { total: lane.metric.total })
                  : t('lanes.backup.metric', { rows: lane.metric.rows })

        return {
          id: lane.id,
          title: t(`lanes.${lane.id}.title`),
          description: t(`lanes.${lane.id}.description`),
          percent: clampPercent(lane.completion_percent),
          status: lane.status || t('states.noData'),
          metric,
          blockerCount: lane.blocker_count,
          nextAction: lane.next_action,
          href: lane.href,
          tone: lane.tone,
          Icon: iconMap[lane.id],
        }
      })
    }

    const statusBlocked = Number(data.statusCleanup?.summary.blocked_gate_count ?? 0)
    const statusPercent = clampPercent(data.statusCleanup?.summary.overall_completion_percent)
    const githubRequired = data.github?.summary.approval_required_target_count ?? 0
    const githubVerified = data.github?.summary.private_backup_verified_count ?? 0
    const githubBlocked = data.github?.summary.blocked_target_count ?? 0
    const githubPercent = githubRequired > 0 ? clampPercent((githubVerified / githubRequired) * 100) : 0
    const giteaPercent = clampPercent(data.gitea?.program_status.overall_completion_percent)
    const giteaBlocked = data.gitea?.rollups.runner_contracts_requiring_action.length ?? 0
    const runtimePercent = clampPercent(data.runtime?.program_status.overall_completion_percent)
    const runtimeBlocked = (data.runtime?.rollups.action_required_surface_ids.length ?? 0) + (data.runtime?.rollups.secret_surface_ids.length ?? 0)
    const backupPercent = clampPercent(data.backup?.program_status.overall_completion_percent)
    const backupBlocked = data.backup?.rollups.blocked_row_ids.length ?? 0

    return [
      {
        id: 'release',
        title: t('lanes.release.title'),
        description: t('lanes.release.description'),
        percent: statusPercent,
        status: data.statusCleanup?.summary.dashboard_status ?? t('states.noData'),
        metric: t('lanes.release.metric', { blocked: statusBlocked }),
        blockerCount: statusBlocked,
        nextAction: data.statusCleanup?.next_actions[0] ?? '',
        href: '/governance?tab=automation-inventory',
        tone: resolveTone(statusBlocked, statusPercent),
        Icon: Rocket,
      },
      {
        id: 'github',
        title: t('lanes.github.title'),
        description: t('lanes.github.description'),
        percent: githubPercent,
        status: data.github?.status ?? t('states.noData'),
        metric: t('lanes.github.metric', { verified: githubVerified, total: githubRequired }),
        blockerCount: githubBlocked,
        nextAction: firstActionRequiredTarget(data.github),
        href: '/governance?tab=automation-inventory',
        tone: resolveTone(githubBlocked, githubPercent),
        Icon: GitBranch,
      },
      {
        id: 'gitea',
        title: t('lanes.gitea.title'),
        description: t('lanes.gitea.description'),
        percent: giteaPercent,
        status: data.gitea?.program_status.current_task_id ?? t('states.noData'),
        metric: t('lanes.gitea.metric', { count: data.gitea?.rollups.total_workflows ?? 0 }),
        blockerCount: giteaBlocked,
        nextAction: firstActionRequiredRunner(data.gitea),
        href: '/deployments',
        tone: resolveTone(giteaBlocked, giteaPercent),
        Icon: PackageCheck,
      },
      {
        id: 'runtime',
        title: t('lanes.runtime.title'),
        description: t('lanes.runtime.description'),
        percent: runtimePercent,
        status: data.runtime?.program_status.current_task_id ?? t('states.noData'),
        metric: t('lanes.runtime.metric', { total: data.runtime?.rollups.total_surfaces ?? 0 }),
        blockerCount: runtimeBlocked,
        nextAction: firstRuntimeAction(data.runtime),
        href: '/governance?tab=automation-inventory',
        tone: resolveTone(runtimeBlocked, runtimePercent),
        Icon: Server,
      },
      {
        id: 'backup',
        title: t('lanes.backup.title'),
        description: t('lanes.backup.description'),
        percent: backupPercent,
        status: data.backup?.program_status.current_task_id ?? t('states.noData'),
        metric: t('lanes.backup.metric', { rows: data.backup?.rollups.total_rows ?? 0 }),
        blockerCount: backupBlocked,
        nextAction: firstBackupAction(data.backup),
        href: '/operations',
        tone: resolveTone(backupBlocked, backupPercent),
        Icon: HardDrive,
      },
    ]
  }, [data, t, workbench])

  const sourceTotal = workbench?.summary.source_count ?? SOURCE_COUNT
  const loadedCount = workbench?.summary.loaded_source_count ?? Object.values(data).filter(Boolean).length
  const highRiskBlockers = workbench?.summary.high_risk_blocker_count ?? lanes.reduce((sum, lane) => sum + lane.blockerCount, 0)
  const averageCompletion = workbench?.summary.average_completion_percent ?? clampPercent(lanes.reduce((sum, lane) => sum + lane.percent, 0) / Math.max(lanes.length, 1))
  const pageTone: DeliveryTone = highRiskBlockers > 0 ? 'danger' : loadedCount === sourceTotal ? 'ok' : 'warn'

  return (
    <AppLayout locale={params.locale}>
      <div data-testid="delivery-page" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <section className="delivery-hero">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#d97757', fontSize: 12, fontWeight: 800 }}>
              <Rocket size={16} aria-hidden="true" />
              <span>{t('eyebrow')}</span>
            </div>
            <h1 style={{ fontSize: 34, lineHeight: 1.1, fontWeight: 900, color: '#141413', margin: '8px 0 8px' }}>
              {t('title')}
            </h1>
            <p style={{ maxWidth: 780, fontSize: 15, lineHeight: 1.65, color: '#595852', margin: 0 }}>
              {t('subtitle')}
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <StatusPill tone={pageTone} label={loading ? t('states.loading') : errors.length > 0 ? t('states.partial') : t('states.ready')} />
            <button
              type="button"
              onClick={() => window.location.reload()}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                minHeight: 34,
                borderRadius: 7,
                border: '0.5px solid #d8d3c5',
                background: '#fffaf0',
                color: '#141413',
                padding: '0 10px',
                fontSize: 13,
                fontWeight: 800,
                cursor: 'pointer',
              }}
            >
              <RefreshCw size={15} aria-hidden="true" />
              {t('actions.refresh')}
            </button>
          </div>
        </section>

        <section className="delivery-metrics">
          <MetricTile label={t('metrics.loaded')} value={`${loadedCount}/${sourceTotal}`} detail={t('metrics.loadedDetail')} tone={loadedCount === sourceTotal ? 'ok' : 'warn'} />
          <MetricTile label={t('metrics.completion')} value={`${averageCompletion}%`} detail={t('metrics.completionDetail')} tone={averageCompletion >= 80 ? 'ok' : 'warn'} />
          <MetricTile label={t('metrics.blockers')} value={highRiskBlockers} detail={t('metrics.blockersDetail')} tone={highRiskBlockers > 0 ? 'danger' : 'ok'} />
          <MetricTile label={t('metrics.execution')} value="0" detail={t('metrics.executionDetail')} tone="ok" />
        </section>

        {errors.length > 0 && (
          <section className="delivery-alert" data-testid="delivery-partial-errors">
            <AlertTriangle size={18} aria-hidden="true" />
            <div>
              <strong>{t('errors.title')}</strong>
              <p>{errors.join(' · ')}</p>
            </div>
          </section>
        )}

        <section>
          <div className="delivery-section-heading">
            <div>
              <h2>{t('sections.lanes')}</h2>
              <p>{t('sections.lanesDetail')}</p>
            </div>
          </div>
          <div className="delivery-lanes">
            {lanes.map(lane => <LaneCard key={lane.id} lane={lane} locale={params.locale} />)}
          </div>
        </section>

        <section className="delivery-grid-two">
          <div>
            <div className="delivery-section-heading">
              <div>
                <h2>{t('sections.next')}</h2>
                <p>{t('sections.nextDetail')}</p>
              </div>
            </div>
            <div className="delivery-next-list">
              {lanes
                .filter(lane => lane.blockerCount > 0 || lane.percent < 80)
                .slice(0, 5)
                .map(lane => (
                  <div key={lane.id} className="delivery-next-row">
                    <lane.Icon size={17} aria-hidden="true" />
                    <div>
                      <strong>{lane.title}</strong>
                      <span>{lane.nextAction || lane.metric}</span>
                    </div>
                    <StatusPill tone={lane.tone} label={`${lane.percent}%`} />
                  </div>
                ))}
            </div>
          </div>

          <div>
            <div className="delivery-section-heading">
              <div>
                <h2>{t('sections.boundary')}</h2>
                <p>{t('sections.boundaryDetail')}</p>
              </div>
            </div>
            <div className="delivery-boundary-list">
              {['secret', 'production', 'repo', 'data', 'security'].map(key => (
                <div key={key} className="delivery-boundary-row">
                  <Lock size={16} aria-hidden="true" />
                  <span>{t(`boundaries.${key}`)}</span>
                  <CheckCircle2 size={16} aria-hidden="true" />
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>

      <style jsx>{`
        .delivery-hero {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          gap: 18px;
          align-items: start;
          padding-bottom: 4px;
        }
        .delivery-metrics,
        .delivery-lanes {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 12px;
        }
        .delivery-section-heading {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 12px;
          margin: 4px 0 10px;
        }
        .delivery-section-heading h2 {
          margin: 0;
          font-size: 19px;
          font-weight: 900;
          color: #141413;
        }
        .delivery-section-heading p {
          margin: 4px 0 0;
          color: #706f68;
          font-size: 13px;
          line-height: 1.5;
        }
        .delivery-alert {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          border: 0.5px solid rgba(178, 67, 45, 0.22);
          background: rgba(178, 67, 45, 0.08);
          color: #7f2f21;
          border-radius: 8px;
          padding: 12px;
        }
        .delivery-alert p {
          margin: 3px 0 0;
          font-size: 13px;
          line-height: 1.5;
        }
        .delivery-grid-two {
          display: grid;
          grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
          gap: 14px;
        }
        .delivery-next-list,
        .delivery-boundary-list {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .delivery-next-row,
        .delivery-boundary-row {
          display: grid;
          grid-template-columns: 20px minmax(0, 1fr) auto;
          align-items: center;
          gap: 10px;
          min-height: 54px;
          border: 0.5px solid #e0ddd4;
          background: rgba(255, 255, 255, 0.62);
          border-radius: 8px;
          padding: 10px;
          color: #45443f;
        }
        .delivery-next-row div {
          display: flex;
          flex-direction: column;
          gap: 3px;
          min-width: 0;
        }
        .delivery-next-row strong {
          color: #141413;
          font-size: 13px;
          overflow-wrap: anywhere;
        }
        .delivery-next-row span,
        .delivery-boundary-row span {
          font-size: 12px;
          line-height: 1.45;
          overflow-wrap: anywhere;
        }
        .delivery-boundary-row {
          grid-template-columns: 20px minmax(0, 1fr) 20px;
        }
        @media (max-width: 900px) {
          .delivery-hero,
          .delivery-grid-two {
            grid-template-columns: 1fr;
          }
        }
      `}</style>
    </AppLayout>
  )
}
