'use client'

import React, { useState, useEffect } from 'react'
import Link from 'next/link'
import { useParams } from 'next/navigation'

interface ProjectOverview {
  id: string
  machine_name: string
  machine_type: string
  manufacturer: string
  status: string
  completeness_pct: number
  created_at: string
  updated_at: string
  gates: Gate[]
  risk_summary: {
    critical: number
    high: number
    medium: number
    low: number
    total: number
  }
  component_count: number
  hazard_count: number
  mitigation_count: number
}

interface Gate {
  id: string
  name: string
  description: string
  passed: boolean | null
  required: boolean
}

const QUICK_ACTIONS = [
  { href: '/components', label: 'Komponenten verwalten', icon: 'cube', description: 'SW/FW/AI/HMI Baum bearbeiten' },
  { href: '/classification', label: 'Klassifikation pruefen', icon: 'tag', description: 'AI Act, MVO, CRA, NIS2' },
  { href: '/hazards', label: 'Hazard Log oeffnen', icon: 'warning', description: 'Gefaehrdungen und Risiken' },
  { href: '/mitigations', label: 'Massnahmen planen', icon: 'shield', description: 'Design, Schutz, Information' },
  { href: '/verification', label: 'Verifikationsplan', icon: 'check', description: 'Nachweise zuordnen' },
  { href: '/evidence', label: 'Nachweise hochladen', icon: 'document', description: 'Dokumente und Berichte' },
  { href: '/tech-file', label: 'CE-Akte generieren', icon: 'folder', description: 'Technische Dokumentation' },
  { href: '/monitoring', label: 'Monitoring', icon: 'activity', description: 'Post-Market Ueberwachung' },
]

function GateIndicator({ gate }: { gate: Gate }) {
  const color = gate.passed === true
    ? 'bg-green-500'
    : gate.passed === false
      ? 'bg-red-500'
      : 'bg-gray-300'

  const textColor = gate.passed === true
    ? 'text-green-700'
    : gate.passed === false
      ? 'text-red-700'
      : 'text-gray-500'

  return (
    <div className="flex items-center gap-3 py-2">
      <div className={`w-3 h-3 rounded-full ${color} flex-shrink-0`} />
      <div className="flex-1 min-w-0">
        <div className={`text-sm font-medium ${textColor}`}>{gate.name}</div>
        <div className="text-xs text-gray-400">{gate.description}</div>
      </div>
      {gate.required && (
        <span className="text-xs text-gray-400 flex-shrink-0">Pflicht</span>
      )}
    </div>
  )
}

function RiskGauge({ label, value, max, color }: { label: string; value: number; max: number; color: string }) {
  const pct = max > 0 ? Math.round((value / max) * 100) : 0
  return (
    <div className="text-center">
      <div className="relative w-20 h-20 mx-auto">
        <svg className="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
          <path
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            fill="none"
            stroke="#E5E7EB"
            strokeWidth="3"
          />
          <path
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            fill="none"
            stroke={color}
            strokeWidth="3"
            strokeDasharray={`${pct}, 100`}
          />
        </svg>
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-lg font-bold text-gray-900 dark:text-white">{value}</span>
        </div>
      </div>
      <div className="mt-1 text-xs text-gray-500">{label}</div>
    </div>
  )
}

const STATUS_WORKFLOW = [
  { key: 'draft', label: 'Entwurf' },
  { key: 'in_progress', label: 'In Bearbeitung' },
  { key: 'review', label: 'In Pruefung' },
  { key: 'approved', label: 'Freigegeben' },
]

export default function ProjectOverviewPage() {
  const params = useParams()
  const projectId = params.projectId as string
  const [project, setProject] = useState<ProjectOverview | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchProject()
  }, [projectId])

  async function fetchProject() {
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}`)
      if (res.ok) {
        const json = await res.json()
        setProject(json)
      }
    } catch (err) {
      console.error('Failed to fetch project:', err)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  if (!project) {
    return (
      <div className="text-center py-12">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Projekt nicht gefunden</h2>
        <Link href="/sdk/iace" className="mt-2 text-purple-600 hover:text-purple-700">
          Zurueck zur Uebersicht
        </Link>
      </div>
    )
  }

  const currentStatusIndex = STATUS_WORKFLOW.findIndex((s) => s.key === project.status)

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{project.machine_name}</h1>
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {project.machine_type} {project.manufacturer ? `-- ${project.manufacturer}` : ''}
        </p>
      </div>

      {/* Status Workflow */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Projektstatus</h2>
        <div className="flex items-center gap-2">
          {STATUS_WORKFLOW.map((step, index) => (
            <React.Fragment key={step.key}>
              <div
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium ${
                  index <= currentStatusIndex
                    ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
                    : 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
                }`}
              >
                {index < currentStatusIndex ? (
                  <svg className="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                ) : index === currentStatusIndex ? (
                  <div className="w-2 h-2 rounded-full bg-purple-600" />
                ) : (
                  <div className="w-2 h-2 rounded-full bg-gray-300" />
                )}
                {step.label}
              </div>
              {index < STATUS_WORKFLOW.length - 1 && (
                <div className={`flex-1 h-0.5 ${index < currentStatusIndex ? 'bg-purple-300' : 'bg-gray-200'}`} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Machine Info */}
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Maschineninformationen</h2>
          <dl className="space-y-3">
            <div>
              <dt className="text-xs text-gray-500">Maschinenname</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-white">{project.machine_name}</dd>
            </div>
            <div>
              <dt className="text-xs text-gray-500">Typ</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-white">{project.machine_type || '--'}</dd>
            </div>
            <div>
              <dt className="text-xs text-gray-500">Hersteller</dt>
              <dd className="text-sm font-medium text-gray-900 dark:text-white">{project.manufacturer || '--'}</dd>
            </div>
            <div>
              <dt className="text-xs text-gray-500">Vollstaendigkeit</dt>
              <dd className="mt-1">
                <div className="flex items-center gap-2">
                  <div className="flex-1 bg-gray-200 rounded-full h-2">
                    <div
                      className="bg-purple-500 h-2 rounded-full transition-all"
                      style={{ width: `${project.completeness_pct}%` }}
                    />
                  </div>
                  <span className="text-sm font-medium text-gray-600">{project.completeness_pct}%</span>
                </div>
              </dd>
            </div>
          </dl>
        </div>

        {/* Risk Summary */}
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Risikozusammenfassung</h2>
          <div className="flex items-center justify-around">
            <RiskGauge label="Kritisch" value={project.risk_summary.critical} max={project.risk_summary.total || 1} color="#EF4444" />
            <RiskGauge label="Hoch" value={project.risk_summary.high} max={project.risk_summary.total || 1} color="#F97316" />
            <RiskGauge label="Mittel" value={project.risk_summary.medium} max={project.risk_summary.total || 1} color="#EAB308" />
            <RiskGauge label="Niedrig" value={project.risk_summary.low} max={project.risk_summary.total || 1} color="#22C55E" />
          </div>
          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-4 text-center">
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">{project.component_count}</div>
              <div className="text-xs text-gray-500">Komponenten</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">{project.hazard_count}</div>
              <div className="text-xs text-gray-500">Gefaehrdungen</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-gray-900 dark:text-white">{project.mitigation_count}</div>
              <div className="text-xs text-gray-500">Massnahmen</div>
            </div>
          </div>
        </div>

        {/* Completeness Gates */}
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
          <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Completeness Gates</h2>
          <div className="space-y-1">
            {project.gates && project.gates.length > 0 ? (
              project.gates.map((gate) => <GateIndicator key={gate.id} gate={gate} />)
            ) : (
              <p className="text-sm text-gray-400">Keine Gates definiert</p>
            )}
          </div>
        </div>
      </div>

      {/* Quick Actions */}
      <div>
        <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Schnellzugriff</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          {QUICK_ACTIONS.map((action) => (
            <Link
              key={action.href}
              href={`/sdk/iace/${projectId}${action.href}`}
              className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md hover:border-purple-300 transition-all group"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center text-purple-600 group-hover:bg-purple-100 transition-colors flex-shrink-0">
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
                  </svg>
                </div>
                <div className="min-w-0">
                  <div className="text-sm font-medium text-gray-900 dark:text-white truncate">{action.label}</div>
                  <div className="text-xs text-gray-500 truncate">{action.description}</div>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}