import { useEffect, useState } from 'react'
import { PlusCircle, Trash2, Info, AlertTriangle, X } from 'lucide-react'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Switch } from '@/components/ui/switch'
import { Separator } from '@/components/ui/separator'
import { useProcessStore } from '@/store/process-store'
import { formatCurrency } from '@/lib/format'
import type { Activity } from '@/domain/types'

interface ActivityPanelProps {
  selectedElementId: string | null
}

export function ActivityPanel({ selectedElementId }: ActivityPanelProps) {
  const { activities, resources, updateActivity, currentProcess } = useProcessStore()
  const [localActivity, setLocalActivity] = useState<Activity | null>(null)
  const [isDirty, setIsDirty] = useState(false)

  const activity = activities.find((a) => a.bpmnElementId === selectedElementId) ?? null

  // Sincronizar con el store cuando cambia la selección
  useEffect(() => {
    setLocalActivity(activity ? {
      ...activity,
      assignedResources: [...activity.assignedResources],
      automatedAssignedResources: [...(activity.automatedAssignedResources ?? [])],
    } : null)
    setIsDirty(false)
  }, [selectedElementId, activities])

  function handleChange<K extends keyof Activity>(key: K, value: Activity[K]) {
    if (!localActivity) return
    setLocalActivity((prev) => prev ? { ...prev, [key]: value } : null)
    setIsDirty(true)
  }

  async function handleSave() {
    if (!localActivity) return
    await updateActivity(localActivity)
    setIsDirty(false)
  }

  function addResource(resourceId: string) {
    if (!localActivity) return
    const already = localActivity.assignedResources.some((r) => r.resourceId === resourceId)
    if (already) return
    handleChange('assignedResources', [
      ...localActivity.assignedResources,
      { resourceId, utilizationMinutes: 0, units: 1 },
    ])
  }

  function removeResource(resourceId: string) {
    if (!localActivity) return
    handleChange(
      'assignedResources',
      localActivity.assignedResources.filter((r) => r.resourceId !== resourceId)
    )
  }

  function setUtilizationMinutes(resourceId: string, minutes: number) {
    if (!localActivity) return
    handleChange(
      'assignedResources',
      localActivity.assignedResources.map((r) =>
        r.resourceId === resourceId
          ? { ...r, utilizationMinutes: Math.max(0, Math.round(minutes)) }
          : r
      )
    )
  }

  function setUnits(resourceId: string, units: number) {
    if (!localActivity) return
    handleChange(
      'assignedResources',
      localActivity.assignedResources.map((r) =>
        r.resourceId === resourceId
          ? { ...r, units: Math.max(1, Math.round(units)) }
          : r
      )
    )
  }

  // ── Handlers TO-BE ────────────────────────────────────────────────────────

  function addAutomatedResource(resourceId: string) {
    if (!localActivity) return
    const already = (localActivity.automatedAssignedResources ?? []).some((r) => r.resourceId === resourceId)
    if (already) return
    handleChange('automatedAssignedResources', [
      ...(localActivity.automatedAssignedResources ?? []),
      { resourceId, utilizationMinutes: 60, units: 1 },
    ])
  }

  function removeAutomatedResource(resourceId: string) {
    if (!localActivity) return
    handleChange(
      'automatedAssignedResources',
      (localActivity.automatedAssignedResources ?? []).filter((r) => r.resourceId !== resourceId)
    )
  }

  function updateAutomatedAssignment(resourceId: string, field: 'utilizationMinutes' | 'units', value: number) {
    if (!localActivity) return
    handleChange(
      'automatedAssignedResources',
      (localActivity.automatedAssignedResources ?? []).map((r) =>
        r.resourceId === resourceId ? { ...r, [field]: value } : r
      )
    )
  }

  if (!selectedElementId) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center px-6 py-12">
        <div className="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mb-3">
          <svg className="w-6 h-6 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" />
          </svg>
        </div>
        <p className="text-sm font-medium text-slate-600 mb-1">Seleccioná una actividad</p>
        <p className="text-xs text-slate-400">Hacé click sobre una tarea en el diagrama para editar sus atributos de costo</p>
      </div>
    )
  }

  if (!localActivity) {
    return (
      <div className="flex items-center justify-center h-full">
        <p className="text-xs text-slate-400">Esta actividad no tiene configuración todavía</p>
      </div>
    )
  }

  const availableResources = resources.filter(
    (r) => !localActivity.assignedResources.some((ar) => ar.resourceId === r.id)
  )

  // Costo de recursos calculado en tiempo real (misma fórmula que simulation.ts)
  const localResourceCost = localActivity.assignedResources.reduce((total, assignment) => {
    const resource = resources.find((r) => r.id === assignment.resourceId)
    if (!resource) return total
    return total + (resource.costPerHour * assignment.utilizationMinutes / 60 * assignment.units)
  }, 0)

  const localTotalCost = localActivity.directCostFixed + localResourceCost

  const availableAutomatedResources = resources.filter(
    (r) => !(localActivity.automatedAssignedResources ?? []).some((ar) => ar.resourceId === r.id)
  )

  const currency = currentProcess?.currency ?? 'USD'

  return (
    <ScrollArea className="h-full">
      <div className="p-4 space-y-5">
        {/* Nombre (read-only, viene del BPMN) */}
        <div>
          <Label className="text-xs text-slate-500 mb-1 block">Actividad</Label>
          <p className="font-semibold text-slate-800 text-sm leading-tight">{localActivity.name || localActivity.bpmnElementId}</p>
          <p className="text-xs text-slate-400 mt-0.5 font-mono">{localActivity.bpmnElementId}</p>
        </div>

        {/* Costo directo fijo */}
        <div className="space-y-1.5">
          <div className="flex items-center gap-1.5">
            <Label htmlFor="direct-cost" className="text-xs font-medium">Costo directo fijo</Label>
            <Tooltip>
              <TooltipTrigger asChild>
                <Info className="h-3 w-3 text-slate-400 cursor-help" />
              </TooltipTrigger>
              <TooltipContent side="right" className="max-w-48 text-xs">
                Costo fijo por cada ejecución de esta actividad (materiales, licencias, etc.) — independiente del tiempo
              </TooltipContent>
            </Tooltip>
          </div>
          <Input
            id="direct-cost"
            type="number"
            min={0}
            step={10}
            value={localActivity.directCostFixed === 0 ? '' : localActivity.directCostFixed}
            onChange={(e) => handleChange('directCostFixed', Math.max(0, parseFloat(e.target.value) || 0))}
            className="font-mono h-8 text-sm"
            placeholder="0"
          />
        </div>

        {/* Tiempo de ejecución */}
        <div className="space-y-1.5">
          <div className="flex items-center gap-1.5">
            <Label htmlFor="exec-time" className="text-xs font-medium">Tiempo de ejecución (min)</Label>
            <Tooltip>
              <TooltipTrigger asChild>
                <Info className="h-3 w-3 text-slate-400 cursor-help" />
              </TooltipTrigger>
              <TooltipContent side="right" className="max-w-48 text-xs">
                Tiempo promedio estimado para completar esta actividad
              </TooltipContent>
            </Tooltip>
          </div>
          <Input
            id="exec-time"
            type="number"
            min={0}
            step={5}
            value={localActivity.executionTimeMinutes === 0 ? '' : localActivity.executionTimeMinutes}
            onChange={(e) => handleChange('executionTimeMinutes', Math.max(0, parseFloat(e.target.value) || 0))}
            className="font-mono h-8 text-sm"
            placeholder="0"
          />
        </div>

        {/* Recursos asignados */}
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <Label className="text-xs font-medium block">Recursos asignados</Label>
            <Tooltip>
              <TooltipTrigger asChild>
                <Info className="h-3 w-3 text-slate-400 cursor-help" />
              </TooltipTrigger>
              <TooltipContent side="right" className="max-w-52 text-xs">
                Cada recurso aporta costo según: costo/hora × minutos por ejecución × unidades
              </TooltipContent>
            </Tooltip>
          </div>

          {localActivity.assignedResources.length === 0 ? (
            <p className="text-xs text-slate-400 py-1">Sin recursos asignados</p>
          ) : (
            <div className="space-y-2">
              {localActivity.assignedResources.map((assignment) => {
                const resource = resources.find((r) => r.id === assignment.resourceId)
                if (!resource) return null

                const resourceCost = resource.costPerHour * assignment.utilizationMinutes / 60 * assignment.units

                return (
                  <div key={assignment.resourceId} className="bg-slate-50 rounded-lg p-3 space-y-2.5">
                    {/* Header del recurso */}
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-xs font-medium text-slate-700">{resource.name}</p>
                        <p className="text-xs text-slate-400 font-mono">{formatCurrency(resource.costPerHour)}/h</p>
                      </div>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-6 w-6 text-slate-400 hover:text-destructive"
                        onClick={() => removeResource(assignment.resourceId)}
                      >
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </div>

                    {/* Inputs: minutos y unidades */}
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-1">
                        <Label className="text-xs text-slate-500">Minutos / ejecución</Label>
                        <Input
                          type="number"
                          min={0}
                          step={1}
                          value={assignment.utilizationMinutes === 0 ? '' : assignment.utilizationMinutes}
                          onChange={(e) => setUtilizationMinutes(assignment.resourceId, parseFloat(e.target.value) || 0)}
                          className="font-mono h-7 text-xs"
                          placeholder="0"
                        />
                      </div>
                      <div className="space-y-1">
                        <Label className="text-xs text-slate-500">Unidades</Label>
                        <Input
                          type="number"
                          min={1}
                          step={1}
                          value={assignment.units}
                          onChange={(e) => setUnits(assignment.resourceId, parseFloat(e.target.value) || 1)}
                          className="font-mono h-7 text-xs"
                        />
                      </div>
                    </div>

                    {/* Costo calculado en tiempo real */}
                    <div className="flex items-center justify-between pt-0.5">
                      <span className="text-xs text-slate-400">Costo por ejecución</span>
                      <span className="text-xs font-mono font-semibold text-slate-700">
                        {formatCurrency(resourceCost)}
                      </span>
                    </div>
                  </div>
                )
              })}
            </div>
          )}

          {/* Selector para agregar recurso */}
          {availableResources.length > 0 && (
            <Select onValueChange={addResource}>
              <SelectTrigger className="h-8 text-xs">
                <div className="flex items-center gap-1.5 text-slate-500">
                  <PlusCircle className="h-3.5 w-3.5" />
                  <SelectValue placeholder="Agregar recurso…" />
                </div>
              </SelectTrigger>
              <SelectContent>
                {availableResources.map((r) => (
                  <SelectItem key={r.id} value={r.id} className="text-xs">
                    {r.name} — {formatCurrency(r.costPerHour)}/h
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}

          {resources.length === 0 && (
            <p className="text-xs text-slate-400">
              Creá recursos en la tab &quot;Recursos&quot; para asignarlos
            </p>
          )}
        </div>

        {/* ── Resumen de costos en tiempo real ─────────────────────────────── */}
        {(localActivity.assignedResources.length > 0 || localActivity.directCostFixed > 0) && (
          <div className="rounded-lg border border-slate-200 bg-white p-3 space-y-1.5">
            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Costo por ejecución</p>
            {localActivity.directCostFixed > 0 && (
              <div className="flex justify-between">
                <span className="text-xs text-slate-500">Fijo (insumos, licencias)</span>
                <span className="text-xs font-mono text-slate-600">{formatCurrency(localActivity.directCostFixed)}</span>
              </div>
            )}
            {localActivity.assignedResources.map((assignment) => {
              const resource = resources.find((r) => r.id === assignment.resourceId)
              if (!resource) return null
              const cost = resource.costPerHour * assignment.utilizationMinutes / 60 * assignment.units
              if (cost === 0) return null
              return (
                <div key={assignment.resourceId} className="flex justify-between">
                  <span className="text-xs text-slate-500">{resource.name}</span>
                  <span className="text-xs font-mono text-slate-600">{formatCurrency(cost)}</span>
                </div>
              )
            })}
            <div className="flex justify-between border-t border-slate-100 pt-1.5 mt-1">
              <span className="text-xs font-semibold text-slate-700">Total</span>
              <span className="text-xs font-mono font-bold text-[#F59845]">{formatCurrency(localTotalCost)}</span>
            </div>
          </div>
        )}

        {/* ── Helper contextual ────────────────────────────────────────────── */}
        {(() => {
          const annualFrequency = currentProcess?.annualFrequency ?? 0
          if (annualFrequency === 0 || localActivity.assignedResources.length === 0) return null

          const topAssignment = [...localActivity.assignedResources]
            .map((a) => {
              const r = resources.find((res) => res.id === a.resourceId)
              return r ? { name: r.name, cost: r.costPerHour * a.utilizationMinutes / 60 * a.units, utilizationMinutes: a.utilizationMinutes } : null
            })
            .filter(Boolean)
            .sort((a, b) => (b?.cost ?? 0) - (a?.cost ?? 0))[0]

          if (!topAssignment || topAssignment.utilizationMinutes === 0) return null

          const execsPerMonth = annualFrequency / 12
          const minutesPerMonth = execsPerMonth * topAssignment.utilizationMinutes
          const daysPerMonth = minutesPerMonth / 60 / 8

          if (daysPerMonth < 0.1) return null

          return (
            <div className="flex items-start gap-2 rounded-lg bg-orange-50 border border-orange-100 px-3 py-2">
              <Info className="h-3.5 w-3.5 text-[#F59845] shrink-0 mt-0.5" />
              <p className="text-xs text-orange-700 leading-snug">
                A {Math.round(execsPerMonth)} ejecuciones/mes, <strong>{topAssignment.name}</strong> dedica{' '}
                <strong>{daysPerMonth < 1 ? `${Math.round(daysPerMonth * 8)}h` : `${daysPerMonth.toFixed(1)} días`}</strong>{' '}
                al mes a esta actividad.
              </p>
            </div>
          )
        })()}

        {/* ── Sección: Automatización ──────────────────────────────────── */}
        <div>
          <Separator className="mb-4" />

          <div className="space-y-3">
            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Automatización</p>

            {/* Toggle */}
            <div className="flex items-center justify-between">
              <Label htmlFor="automatable-toggle" className="text-xs font-medium cursor-pointer">
                ¿Es automatizable?
              </Label>
              <Switch
                id="automatable-toggle"
                checked={localActivity.automatable}
                onCheckedChange={(v) => handleChange('automatable', v)}
                aria-label="Marcar actividad como automatizable"
              />
            </div>

            {/* Campos — aparecen con transición suave cuando toggle=ON */}
            <div className={`space-y-3 overflow-hidden transition-all duration-200 ${localActivity.automatable ? 'max-h-[640px] opacity-100' : 'max-h-0 opacity-0'}`}>

              {/* Costo automatizado */}
              <div className="space-y-1.5">
                <div className="flex items-center gap-1.5">
                  <Label htmlFor="automated-cost" className="text-xs font-medium">
                    Costo automatizado
                  </Label>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Info className="h-3 w-3 text-slate-400 cursor-help" />
                    </TooltipTrigger>
                    <TooltipContent side="right" className="max-w-56 text-xs">
                      Costo recurrente por ejecución automatizada. No incluye la inversión inicial del proyecto.
                      Ver METHODOLOGY_AUTOMATED_COST.md para la guía de cálculo.
                    </TooltipContent>
                  </Tooltip>
                </div>
                <Input
                  id="automated-cost"
                  type="number"
                  min={0}
                  step={1}
                  value={localActivity.automatedCostFixed === 0 ? '' : localActivity.automatedCostFixed}
                  onChange={(e) => handleChange('automatedCostFixed', Math.max(0, parseFloat(e.target.value) || 0))}
                  className="font-mono h-8 text-sm"
                  placeholder="0"
                />
              </div>

              {/* Tiempo automatizado */}
              <div className="space-y-1.5">
                <Label htmlFor="automated-time" className="text-xs font-medium">
                  Tiempo automatizado (min)
                </Label>
                <Input
                  id="automated-time"
                  type="number"
                  min={0}
                  step={1}
                  value={localActivity.automatedTimeMinutes === 0 ? '' : localActivity.automatedTimeMinutes}
                  onChange={(e) => handleChange('automatedTimeMinutes', Math.max(0, parseFloat(e.target.value) || 0))}
                  className="font-mono h-8 text-sm"
                  placeholder="0"
                />
              </div>

              {/* ── Recursos TO-BE ───────────────────────────────────────── */}
              <Separator />

              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                    Recursos TO-BE
                  </p>
                  {availableAutomatedResources.length > 0 && (
                    <Select onValueChange={addAutomatedResource}>
                      <SelectTrigger className="h-7 text-xs w-[120px]">
                        <SelectValue placeholder="+ Agregar" />
                      </SelectTrigger>
                      <SelectContent>
                        {availableAutomatedResources.map((r) => (
                          <SelectItem key={r.id} value={r.id} className="text-xs">
                            {r.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                </div>

                {(localActivity.automatedAssignedResources ?? []).length === 0 ? (
                  <p className="text-xs text-slate-400 italic">
                    Sin recursos TO-BE — solo costo fijo automatizado.
                  </p>
                ) : (
                  <div className="space-y-2">
                    {(localActivity.automatedAssignedResources ?? []).map((assignment) => {
                      const resource = resources.find((r) => r.id === assignment.resourceId)
                      if (!resource) return null
                      const cost = resource.costPerHour * (assignment.utilizationMinutes / 60) * assignment.units
                      return (
                        <div key={assignment.resourceId} className="rounded-lg border border-border bg-card p-2 space-y-1.5">
                          <div className="flex items-center justify-between">
                            <span className="text-xs font-medium truncate max-w-[120px]">{resource.name}</span>
                            <div className="flex items-center gap-2">
                              <span className="text-xs font-mono text-slate-500">
                                {formatCurrency(cost, currency)}
                              </span>
                              <button
                                type="button"
                                onClick={() => removeAutomatedResource(assignment.resourceId)}
                                className="text-slate-400 hover:text-red-500 transition-colors"
                                aria-label={`Quitar ${resource.name}`}
                              >
                                <X className="h-3.5 w-3.5" />
                              </button>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="flex-1 space-y-0.5">
                              <p className="text-[10px] text-slate-400">Min. por ejecución</p>
                              <Input
                                type="number"
                                min={0}
                                step={1}
                                value={assignment.utilizationMinutes || ''}
                                onChange={(e) =>
                                  updateAutomatedAssignment(
                                    assignment.resourceId,
                                    'utilizationMinutes',
                                    Math.max(0, parseFloat(e.target.value) || 0)
                                  )
                                }
                                className="h-6 text-xs font-mono"
                              />
                            </div>
                            <div className="w-16 space-y-0.5">
                              <p className="text-[10px] text-slate-400">Unidades</p>
                              <Input
                                type="number"
                                min={1}
                                step={1}
                                value={assignment.units || ''}
                                onChange={(e) =>
                                  updateAutomatedAssignment(
                                    assignment.resourceId,
                                    'units',
                                    Math.max(1, parseInt(e.target.value) || 1)
                                  )
                                }
                                className="h-6 text-xs font-mono"
                              />
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                )}
              </div>

              {/* Helper ámbar — siempre en el DOM para que la transición funcione
                  al tipear un valor (no desaparece instantáneo sino con fade).
                  La condición controla opacity + max-h, no mount/unmount. */}
              {(() => {
                const showHelper = localActivity.automatable
                  && localActivity.automatedCostFixed === 0
                  && localActivity.automatedTimeMinutes === 0
                  && (localActivity.automatedAssignedResources ?? []).length === 0
                return (
                  <div
                    aria-hidden={!showHelper}
                    className={`overflow-hidden transition-all duration-150 ease-out ${
                      showHelper ? 'opacity-100 max-h-20' : 'opacity-0 max-h-0'
                    }`}
                  >
                    <div className="flex items-start gap-2 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2">
                      <AlertTriangle className="h-3.5 w-3.5 text-amber-600 shrink-0 mt-0.5" />
                      <p className="text-xs text-amber-700 leading-snug">
                        Esta actividad aparecerá en &quot;Transparencia metodológica&quot; del reporte hasta que cargues valores.
                      </p>
                    </div>
                  </div>
                )
              })()}
            </div>
          </div>
        </div>

        {/* Guardar */}
        <Button
          size="sm"
          onClick={handleSave}
          disabled={!isDirty}
          className="w-full"
        >
          {isDirty ? 'Guardar cambios' : 'Sin cambios'}
        </Button>
      </div>
    </ScrollArea>
  )
}
