'use client'

import React, { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { CATEGORY_LABELS } from './types'
import { RiskBadge } from './RiskBadge'

interface BlockHazard {
  hazard: {
    id: string; name: string; description: string; category: string
    hazardous_zone: string; scenario?: string; possible_harm?: string
  }
  assessment?: { severity: number; exposure: number; probability: number; inherent_risk: number; risk_level: string } | null
  mitigation_ids: string[]
}

interface HazardBlock {
  parent_hazard: BlockHazard
  children: BlockHazard[]
  block_key: string
  shared_measure_count: number
  children_covered_by_parent: boolean
}

interface BlockSummary {
  total_blocks: number
  parent_only_blocks: number
  blocks_with_children: number
  total_hazards: number
  covered_children: number
  uncovered_children: number
  assessments_needed: number
  assessments_saved: number
}

export function HazardBlockView() {
  const { projectId } = useParams<{ projectId: string }>()
  const [blocks, setBlocks] = useState<HazardBlock[]>([])
  const [summary, setSummary] = useState<BlockSummary | null>(null)
  const [loading, setLoading] = useState(true)
  const [expanded, setExpanded] = useState<Record<string, boolean>>({})

  useEffect(() => {
    if (!projectId) return
    fetch(`/api/sdk/v1/iace/projects/${projectId}/hazard-blocks`)
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (data) {
          setBlocks(data.blocks || [])
          setSummary(data.summary || null)
        }
      })
      .finally(() => setLoading(false))
  }, [projectId])

  const toggle = (key: string) => setExpanded(prev => ({ ...prev, [key]: !prev[key] }))

  if (loading) return <div className="text-sm text-gray-400 py-8 text-center">Lade Bloecke...</div>

  return (
    <div className="space-y-4">
      {/* Summary Cards */}
      {summary && (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <SummaryCard label="Bloecke" value={summary.total_blocks} sub={`${summary.total_hazards} Gefaehrdungen`} />
          <SummaryCard label="Mit Kindern" value={summary.blocks_with_children} sub={`${summary.covered_children} abgedeckt`} color="green" />
          <SummaryCard label="Bewertungen noetig" value={summary.assessments_needed} sub={`von ${summary.total_hazards}`} color="purple" />
          <SummaryCard label="Eingespart" value={summary.assessments_saved} sub="durch Gruppierung" color="green" />
        </div>
      )}

      {/* Block List */}
      <div className="space-y-2">
        {blocks.map((block) => {
          const isOpen = expanded[block.block_key]
          const parent = block.parent_hazard
          const childCount = block.children.length
          const covered = block.children_covered_by_parent

          return (
            <div key={block.block_key} className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
              {/* Parent Row */}
              <div
                className={`flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${childCount > 0 ? '' : 'opacity-90'}`}
                onClick={() => childCount > 0 && toggle(block.block_key)}
              >
                {/* Expand Arrow */}
                {childCount > 0 ? (
                  <svg className={`w-4 h-4 text-gray-400 transition-transform ${isOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                ) : (
                  <div className="w-4 h-4" />
                )}

                {/* Name + Category */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-gray-900 dark:text-white truncate">{parent.hazard.name}</span>
                    <span className="text-xs text-gray-400">{CATEGORY_LABELS[parent.hazard.category] || parent.hazard.category}</span>
                  </div>
                  {parent.hazard.hazardous_zone && (
                    <div className="text-xs text-gray-500 truncate">{parent.hazard.hazardous_zone}</div>
                  )}
                </div>

                {/* Risk */}
                {parent.assessment ? (
                  <div className="flex items-center gap-2 text-xs">
                    <span className="text-gray-500">R={parent.assessment.inherent_risk}</span>
                    <RiskBadge level={parent.assessment.risk_level} />
                  </div>
                ) : (
                  <span className="text-xs text-gray-400">Nicht bewertet</span>
                )}

                {/* Child count badge */}
                {childCount > 0 && (
                  <div className={`flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
                    covered
                      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                      : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
                  }`}>
                    +{childCount}
                    {covered && (
                      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                )}

                {/* Measures count */}
                <span className="text-xs text-gray-400">{block.shared_measure_count} M.</span>
              </div>

              {/* Children (expanded) */}
              {isOpen && childCount > 0 && (
                <div className="border-t border-gray-100 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-850">
                  {covered && (
                    <div className="px-4 py-2 text-xs text-green-600 dark:text-green-400 bg-green-50/50 dark:bg-green-900/10 border-b border-green-100 dark:border-green-900/30">
                      Alle Untergefaehrdungen durch Massnahmen der Muttergefaehrdung abgedeckt — keine separate Bewertung noetig.
                    </div>
                  )}
                  {block.children.map((child) => (
                    <div key={child.hazard.id} className="flex items-center gap-3 px-4 py-2 pl-12 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
                      <div className="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0" />
                      <div className="flex-1 min-w-0">
                        <span className="text-xs text-gray-700 dark:text-gray-300">{child.hazard.name}</span>
                        {child.hazard.hazardous_zone && (
                          <span className="text-xs text-gray-400 ml-2">[{child.hazard.hazardous_zone}]</span>
                        )}
                      </div>
                      {child.assessment ? (
                        <span className="text-xs text-gray-500">R={child.assessment.inherent_risk}</span>
                      ) : covered ? (
                        <span className="text-xs text-green-500">Abgedeckt</span>
                      ) : (
                        <span className="text-xs text-yellow-500">Offen</span>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}

function SummaryCard({ label, value, sub, color }: { label: string; value: number; sub: string; color?: string }) {
  const textColor = color === 'green' ? 'text-green-600' : color === 'purple' ? 'text-purple-600' : 'text-gray-900 dark:text-white'
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-3 text-center">
      <div className={`text-xl font-bold ${textColor}`}>{value}</div>
      <div className="text-xs font-medium text-gray-600 dark:text-gray-400">{label}</div>
      <div className="text-[10px] text-gray-400">{sub}</div>
    </div>
  )
}
