import { useMemo, useState } from 'react'
import { Bot, ArrowUpDown } from 'lucide-react'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { formatCurrency, formatPercent } from '@/lib/format'
import type { ActivitySimResult } from '@/domain/types'

interface ComparisonRow {
  activityId: string
  activityName: string
  actualCost: number
  automatedCost: number
  savings: number
  savingsPercent: number
  automatable: boolean
  expectedSavings: number | null
  efficiency: number | null
}

type SortBy = 'savings' | 'expectedSavings' | 'efficiency'

interface ComparisonTableProps {
  perActivityActual: ActivitySimResult[]
  perActivityAutomated: ActivitySimResult[]
  automatableIds: Set<string>   // bpmnElementIds marcados como automatizables
  currency: string
}

function MetricCell({
  value,
  max,
  format,
}: {
  value: number | null
  max: number
  format: (v: number) => string
}) {
  if (value === null) {
    return (
      <TableCell className="text-xs text-right">
        <span className="text-slate-300">—</span>
      </TableCell>
    )
  }
  return (
    <TableCell className="text-xs text-right">
      <div className="flex items-center justify-end gap-2">
        <div className="w-14 h-1.5 rounded-full bg-slate-100 overflow-hidden">
          <div
            className="h-full rounded-full bg-gradient-to-r from-amber-400 to-orange-500"
            style={{ width: `${max > 0 ? (value / max) * 100 : 0}%` }}
          />
        </div>
        <span className="font-mono text-slate-700 text-xs w-14 text-right whitespace-nowrap">
          {format(value)}
        </span>
      </div>
    </TableCell>
  )
}

export function ComparisonTable({
  perActivityActual,
  perActivityAutomated,
  automatableIds,
  currency,
}: ComparisonTableProps) {
  const [sortBy, setSortBy] = useState<SortBy>('efficiency')
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')

  const automatedByActivityId = useMemo(() => {
    const m = new Map<string, ActivitySimResult>()
    for (const a of perActivityAutomated) m.set(a.activityId, a)
    return m
  }, [perActivityAutomated])

  const rows: ComparisonRow[] = useMemo(() => {
    const built = perActivityActual.map((act) => {
      const automated = automatedByActivityId.get(act.activityId)
      const automatedCost = automated?.expectedTotalCost ?? act.expectedTotalCost
      const savings = act.expectedTotalCost - automatedCost
      const savingsPercent =
        act.expectedTotalCost > 0 ? (savings / act.expectedTotalCost) * 100 : 0
      const automatable = automatableIds.has(act.bpmnElementId)

      const expectedSavings =
        automatable && savings > 0 ? savings * act.executionProbability : null

      const efficiency =
        automatable && savings > 0 && act.executionTimeMinutes > 0
          ? (savings * act.executionProbability) / act.executionTimeMinutes
          : null

      return {
        activityId: act.activityId,
        activityName: act.activityName,
        actualCost: act.expectedTotalCost,
        automatedCost,
        savings,
        savingsPercent,
        automatable,
        expectedSavings,
        efficiency,
      }
    })

    return built.sort((a, b) => {
      const val = (row: ComparisonRow) => {
        if (sortBy === 'efficiency') return row.efficiency ?? -Infinity
        if (sortBy === 'expectedSavings') return row.expectedSavings ?? -Infinity
        return row.savings
      }
      return (val(b) - val(a)) * (sortDir === 'desc' ? 1 : -1)
    })
  }, [perActivityActual, automatedByActivityId, automatableIds, sortBy, sortDir])

  const maxExpectedSavings = Math.max(
    ...rows.filter((r) => r.expectedSavings !== null).map((r) => r.expectedSavings as number),
    0
  )
  const maxEfficiency = Math.max(
    ...rows.filter((r) => r.efficiency !== null).map((r) => r.efficiency as number),
    0
  )

  if (rows.length === 0) {
    return (
      <div className="flex items-center justify-center h-24 text-xs text-slate-400 rounded-xl border border-slate-200">
        Sin actividades para comparar
      </div>
    )
  }

  function toggleSort(col: SortBy) {
    if (sortBy === col) setSortDir((d) => (d === 'desc' ? 'asc' : 'desc'))
    else {
      setSortBy(col)
      setSortDir('desc')
    }
  }

  return (
    <div className="rounded-xl border border-inq-orange/20 overflow-hidden">
      <Table>
        <TableHeader style={{ background: '#FFF8ED', borderBottom: '1px solid #F59845' }}>
          <tr>
            <TableHead className="w-8 text-xs text-amber-800/70" />
            <TableHead className="text-xs text-amber-800/70 font-medium uppercase tracking-wide">Actividad</TableHead>
            <TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">Costo actual</TableHead>
            <TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">Costo automatizado</TableHead>
            <TableHead
              className="text-xs text-right cursor-pointer select-none text-amber-800/70 font-medium uppercase tracking-wide hover:text-amber-900"
              onClick={() => toggleSort('savings')}
            >
              <span className="inline-flex items-center justify-end gap-1">
                Ahorro
                <ArrowUpDown className={`h-3 w-3 ${sortBy === 'savings' ? 'opacity-80' : 'opacity-40'}`} />
              </span>
            </TableHead>
            <TableHead className="text-xs text-right text-amber-800/70 font-medium uppercase tracking-wide">% ahorro</TableHead>
            <TableHead
              className="text-xs text-right cursor-pointer select-none text-amber-800/70 font-medium uppercase tracking-wide hover:text-amber-900"
              onClick={() => toggleSort('expectedSavings')}
            >
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <span className="inline-flex items-center justify-end gap-1">
                      Ahorro esperado
                      <ArrowUpDown className={`h-3 w-3 ${sortBy === 'expectedSavings' ? 'opacity-80' : 'opacity-40'}`} />
                    </span>
                  </TooltipTrigger>
                  <TooltipContent side="top" className="max-w-52 text-xs text-center">
                    Ahorro por instancia ponderado por probabilidad de ejecución de la actividad
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </TableHead>
            <TableHead
              className="text-xs text-right cursor-pointer select-none text-amber-800/70 font-medium uppercase tracking-wide hover:text-amber-900"
              onClick={() => toggleSort('efficiency')}
            >
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <span className="inline-flex items-center justify-end gap-1">
                      Eficiencia
                      <ArrowUpDown className={`h-3 w-3 ${sortBy === 'efficiency' ? 'opacity-80' : 'opacity-40'}`} />
                    </span>
                  </TooltipTrigger>
                  <TooltipContent side="top" className="max-w-52 text-xs text-center">
                    Ahorro esperado dividido por tiempo de ejecución — prioriza actividades con mayor retorno por minuto de proceso
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </TableHead>
          </tr>
        </TableHeader>
        <TableBody>
          {rows.map((row) => {
            const savingsColor =
              row.savings > 0
                ? 'text-emerald-700'
                : row.savings < 0
                ? 'text-red-600'
                : 'text-slate-400'
            const rowClass = row.automatable ? '' : 'bg-slate-50/60'
            const textClass = row.automatable ? 'text-slate-800' : 'text-slate-500'
            return (
              <TableRow key={row.activityId} className={rowClass}>
                <TableCell className="py-2">
                  {row.automatable && (
                    <Bot
                      className="h-3.5 w-3.5 text-amber-500"
                      aria-label="Marcada como automatizable"
                    />
                  )}
                </TableCell>
                <TableCell className={`text-xs font-medium max-w-48 truncate ${textClass}`}>
                  {row.activityName}
                </TableCell>
                <TableCell className={`text-xs font-mono text-right ${row.automatable ? 'text-slate-600' : 'text-slate-400'}`}>
                  {formatCurrency(row.actualCost, currency)}
                </TableCell>
                <TableCell className={`text-xs font-mono text-right ${row.automatable ? 'text-slate-600' : 'text-slate-400'}`}>
                  {formatCurrency(row.automatedCost, currency)}
                </TableCell>
                <TableCell className={`text-xs font-mono font-semibold text-right ${row.automatable ? savingsColor : 'text-slate-300'}`}>
                  {row.automatable
                    ? (row.savings > 0 ? '+' : '') + formatCurrency(row.savings, currency)
                    : '—'}
                </TableCell>
                <TableCell className={`text-xs font-mono text-right ${row.automatable ? savingsColor : 'text-slate-300'}`}>
                  {row.automatable
                    ? (row.savings > 0 ? '+' : '') + formatPercent(row.savingsPercent)
                    : '—'}
                </TableCell>
                <MetricCell
                  value={row.expectedSavings}
                  max={maxExpectedSavings}
                  format={(v) => formatCurrency(v, currency)}
                />
                <MetricCell
                  value={row.efficiency}
                  max={maxEfficiency}
                  format={(v) => `${v.toFixed(2)} ${currency}/min`}
                />
              </TableRow>
            )
          })}
        </TableBody>
      </Table>
    </div>
  )
}
