'use client'

import React from 'react'
import Link from 'next/link'
import { StationIcon } from './StationIcons'
import { STATION_TYPES } from '../../_types'
import type { StationDashboard } from '../../_types'

const STATUS_COLORS: Record<string, string> = {
  draft: 'bg-gray-100 text-gray-700',
  in_progress: 'bg-blue-100 text-blue-700',
  review: 'bg-yellow-100 text-yellow-700',
  approved: 'bg-green-100 text-green-700',
  archived: 'bg-gray-100 text-gray-500',
}

const STATUS_LABELS: Record<string, string> = {
  draft: 'Entwurf',
  in_progress: 'In Bearbeitung',
  review: 'In Pruefung',
  approved: 'Freigegeben',
  archived: 'Archiviert',
}

const RISK_LEVELS = [
  { key: 'critical', label: 'Kritisch', color: 'bg-red-500', text: 'text-red-700' },
  { key: 'high', label: 'Hoch', color: 'bg-orange-500', text: 'text-orange-700' },
  { key: 'medium', label: 'Mittel', color: 'bg-yellow-500', text: 'text-yellow-700' },
  { key: 'low', label: 'Niedrig', color: 'bg-green-500', text: 'text-green-700' },
]

interface StationCardProps {
  station: StationDashboard
  expanded: boolean
  onToggle: () => void
}

export function StationCard({ station, expanded, onToggle }: StationCardProps) {
  const stationType = STATION_TYPES[station.station.station_type]
  const bgColor = stationType?.bgColor || 'bg-gray-50'
  const accentColor = stationType?.color || '#6B7280'

  const totalRisk = Object.values(station.risk_summary).reduce((a, b) => a + b, 0)
  const pctBar = station.completeness_pct

  return (
    <div
      className={`w-56 flex-shrink-0 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden shadow-sm hover:shadow-md transition-shadow`}
    >
      {/* Color accent bar */}
      <div className="h-1.5" style={{ backgroundColor: accentColor }} />

      {/* Collapsed content */}
      <div className="p-4">
        {/* Icon + name */}
        <div className="flex items-center gap-3 mb-2">
          <div
            className={`w-10 h-10 ${bgColor} dark:bg-opacity-20 rounded-lg flex items-center justify-center flex-shrink-0`}
            style={{ color: accentColor }}
          >
            <StationIcon type={station.station.station_type} size={22} />
          </div>
          <div className="min-w-0">
            <div className="text-sm font-semibold text-gray-900 dark:text-white truncate">
              {station.station.station_label}
            </div>
            <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
              {station.project_name}
            </div>
          </div>
        </div>

        {/* Hazard count */}
        <div className="text-xs text-gray-600 dark:text-gray-400 mb-2">
          {station.hazard_count} Gefaehrdungen
        </div>

        {/* Completeness bar */}
        <div className="flex items-center gap-2 mb-2">
          <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
            <div
              className="h-2 rounded-full transition-all"
              style={{
                width: `${pctBar}%`,
                backgroundColor: accentColor,
              }}
            />
          </div>
          <span className="text-xs font-medium text-gray-600 dark:text-gray-400 w-8 text-right">
            {pctBar}%
          </span>
        </div>

        {/* SIL / PL */}
        {(station.sil_max || station.pl_max) && (
          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mb-3">
            {station.sil_max && <span>SIL {station.sil_max}</span>}
            {station.sil_max && station.pl_max && <span>|</span>}
            {station.pl_max && <span>PL {station.pl_max}</span>}
          </div>
        )}

        {/* Toggle button */}
        <button
          onClick={onToggle}
          className="w-full text-left text-xs text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium flex items-center gap-1"
        >
          {expanded ? 'Weniger anzeigen' : 'Details anzeigen'}
          <svg
            className={`w-3.5 h-3.5 transition-transform ${expanded ? '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>
        </button>
      </div>

      {/* Expanded content */}
      {expanded && (
        <div className="px-4 pb-4 border-t border-gray-100 dark:border-gray-700 pt-3 space-y-3">
          {/* Risk breakdown */}
          <div className="space-y-1.5">
            {RISK_LEVELS.map((level) => {
              const count = station.risk_summary[level.key] || 0
              const pct = totalRisk > 0 ? Math.round((count / totalRisk) * 100) : 0
              return (
                <div key={level.key} className="flex items-center gap-2">
                  <span className={`text-[10px] font-medium w-12 ${level.text}`}>{level.label}</span>
                  <div className="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden">
                    <div className={`${level.color} h-2.5 rounded-full`} style={{ width: `${pct}%` }} />
                  </div>
                  <span className="text-xs font-bold text-gray-700 dark:text-gray-300 w-6 text-right">{count}</span>
                </div>
              )
            })}
          </div>

          {/* Mitigation count */}
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500 dark:text-gray-400">Massnahmen</span>
            <span className="font-semibold text-gray-700 dark:text-gray-300">{station.mitigation_count}</span>
          </div>

          {/* Status badge */}
          <div className="flex items-center justify-between text-xs">
            <span className="text-gray-500 dark:text-gray-400">Status</span>
            <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[station.status] || STATUS_COLORS.draft}`}>
              {STATUS_LABELS[station.status] || station.status}
            </span>
          </div>

          {/* Link to project */}
          <Link
            href={`/sdk/iace/${station.station.project_id}`}
            className="block text-center text-xs font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 bg-purple-50 dark:bg-purple-900/20 rounded-lg py-2 transition-colors"
          >
            Zum Projekt &rarr;
          </Link>
        </div>
      )}
    </div>
  )
}
