'use client'

import React, { useState, useEffect, useCallback } from 'react'

// =============================================================================
// TYPES
// =============================================================================

interface ISMSOverview {
  overall_status: string
  certification_readiness: number
  chapters: ChapterStatus[]
  scope_approved: boolean
  soa_approved: boolean
  last_management_review: string | null
  last_internal_audit: string | null
  open_major_findings: number
  open_minor_findings: number
  policies_count: number
  policies_approved: number
  objectives_count: number
  objectives_achieved: number
}

interface ChapterStatus {
  chapter: string
  title: string
  status: string
  completion_percentage: number
  open_findings: number
  key_documents: string[]
  last_reviewed: string | null
}

interface ISMSScope {
  id: string
  scope_statement: string
  included_locations: string[]
  included_processes: string[]
  included_services: string[]
  excluded_items: string[]
  exclusion_justification: string
  organizational_boundary: string
  physical_boundary: string
  technical_boundary: string
  status: string
  version: string
  created_by: string
  approved_by: string | null
  approved_at: string | null
  effective_date: string | null
  review_date: string | null
  created_at: string
}

interface ISMSContext {
  id: string
  internal_issues: Record<string, unknown>[] | null
  external_issues: Record<string, unknown>[] | null
  interested_parties: Record<string, unknown>[] | null
  regulatory_requirements: string[]
  contractual_requirements: string[]
  swot_strengths: string[]
  swot_weaknesses: string[]
  swot_opportunities: string[]
  swot_threats: string[]
  status: string
  created_at: string
}

interface ISMSPolicy {
  id: string
  policy_id: string
  title: string
  policy_type: string
  description: string
  policy_text: string
  applies_to: string[]
  review_frequency_months: number
  related_controls: string[]
  status: string
  version: string
  authored_by: string
  reviewed_by: string | null
  approved_by: string | null
  approved_at: string | null
  effective_date: string | null
  next_review_date: string | null
  created_at: string
}

interface SecurityObjective {
  id: string
  objective_id: string
  title: string
  description: string
  category: string
  kpi_name: string
  kpi_target: number
  kpi_unit: string
  measurement_frequency: string
  owner: string
  target_date: string
  progress_percentage: number
  status: string
  achieved_date: string | null
}

interface SoAEntry {
  id: string
  annex_a_control: string
  annex_a_title: string
  annex_a_category: string
  is_applicable: boolean
  applicability_justification: string
  implementation_status: string
  implementation_notes: string
  breakpilot_control_ids: string[]
  coverage_level: string
  evidence_description: string
  version: string
  approved_at: string | null
}

interface InternalAudit {
  id: string
  audit_id: string
  title: string
  audit_type: string
  scope_description: string
  iso_chapters_covered: string[]
  planned_date: string
  actual_end_date: string | null
  lead_auditor: string
  audit_team: string[]
  status: string
  total_findings: number
  major_findings: number
  minor_findings: number
  ofi_count: number
  audit_conclusion: string | null
  overall_assessment: string | null
}

interface AuditFinding {
  id: string
  finding_id: string
  finding_type: string
  iso_chapter: string
  annex_a_control: string | null
  title: string
  description: string
  objective_evidence: string
  owner: string
  auditor: string
  status: string
  due_date: string | null
  closed_date: string | null
  internal_audit_id: string | null
  is_blocking: boolean
}

interface CAPA {
  id: string
  capa_id: string
  finding_id: string
  capa_type: string
  title: string
  description: string
  assigned_to: string
  status: string
  planned_completion: string
  actual_completion: string | null
  effectiveness_verified: boolean | null
}

interface ManagementReview {
  id: string
  review_id: string
  title: string
  review_date: string
  review_period_start: string
  review_period_end: string
  chairperson: string
  attendees: Record<string, unknown>[] | null
  status: string
  approved_by: string | null
  approved_at: string | null
  next_review_date: string | null
  action_items: Record<string, unknown>[] | null
}

interface ReadinessCheck {
  id: string
  check_date: string
  overall_status: string
  certification_possible: boolean
  readiness_score: number
  chapter_4_status: string
  chapter_5_status: string
  chapter_6_status: string
  chapter_7_status: string
  chapter_8_status: string
  chapter_9_status: string
  chapter_10_status: string
  potential_majors: PotentialFinding[]
  potential_minors: PotentialFinding[]
  priority_actions: string[]
}

interface PotentialFinding {
  check: string
  status: string
  recommendation: string
  iso_reference: string
}

type TabId = 'overview' | 'policies' | 'soa' | 'objectives' | 'audits' | 'reviews'

const API = '/api/sdk/v1/isms'

// =============================================================================
// HELPER COMPONENTS
// =============================================================================

function StatusBadge({ status, size = 'sm' }: { status: string; size?: 'sm' | 'md' }) {
  const colors: Record<string, string> = {
    ready: 'bg-green-100 text-green-700',
    compliant: 'bg-green-100 text-green-700',
    approved: 'bg-green-100 text-green-700',
    pass: 'bg-green-100 text-green-700',
    implemented: 'bg-green-100 text-green-700',
    completed: 'bg-green-100 text-green-700',
    verified: 'bg-green-100 text-green-700',
    achieved: 'bg-green-100 text-green-700',
    closed: 'bg-green-100 text-green-700',
    at_risk: 'bg-yellow-100 text-yellow-700',
    partial: 'bg-yellow-100 text-yellow-700',
    warning: 'bg-yellow-100 text-yellow-700',
    planned: 'bg-blue-100 text-blue-700',
    draft: 'bg-gray-100 text-gray-700',
    active: 'bg-blue-100 text-blue-700',
    in_progress: 'bg-blue-100 text-blue-700',
    not_ready: 'bg-red-100 text-red-700',
    non_compliant: 'bg-red-100 text-red-700',
    fail: 'bg-red-100 text-red-700',
    open: 'bg-red-100 text-red-700',
    corrective_action_pending: 'bg-orange-100 text-orange-700',
    verification_pending: 'bg-yellow-100 text-yellow-700',
  }
  const cls = colors[status] || 'bg-gray-100 text-gray-600'
  const labels: Record<string, string> = {
    ready: 'Bereit', not_ready: 'Nicht bereit', at_risk: 'Risiko',
    compliant: 'Konform', non_compliant: 'Nicht konform', partial: 'Teilweise',
    approved: 'Genehmigt', draft: 'Entwurf', pass: 'Bestanden', fail: 'Fehlgeschlagen',
    warning: 'Warnung', implemented: 'Implementiert', planned: 'Geplant',
    active: 'Aktiv', achieved: 'Erreicht', completed: 'Abgeschlossen',
    open: 'Offen', closed: 'Geschlossen', verified: 'Verifiziert',
    corrective_action_pending: 'CAPA ausstehend', verification_pending: 'Verifizierung',
    in_progress: 'In Bearbeitung',
    not_applicable: 'N/A',
  }
  const pad = size === 'md' ? 'px-3 py-1 text-sm' : 'px-2 py-0.5 text-xs'
  return <span className={`${cls} ${pad} rounded-full font-medium`}>{labels[status] || status}</span>
}

function StatCard({ label, value, sub, color = 'purple' }: { label: string; value: string | number; sub?: string; color?: string }) {
  const colors: Record<string, string> = {
    purple: 'border-purple-200 bg-purple-50',
    green: 'border-green-200 bg-green-50',
    red: 'border-red-200 bg-red-50',
    yellow: 'border-yellow-200 bg-yellow-50',
    blue: 'border-blue-200 bg-blue-50',
  }
  return (
    <div className={`border rounded-xl p-4 ${colors[color] || colors.purple}`}>
      <div className="text-2xl font-bold text-gray-900">{value}</div>
      <div className="text-sm font-medium text-gray-700 mt-1">{label}</div>
      {sub && <div className="text-xs text-gray-500 mt-0.5">{sub}</div>}
    </div>
  )
}

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

function EmptyState({ text, action, onAction }: { text: string; action?: string; onAction?: () => void }) {
  return (
    <div className="text-center py-16 text-gray-500">
      <p>{text}</p>
      {action && onAction && (
        <button onClick={onAction} className="mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">
          {action}
        </button>
      )}
    </div>
  )
}

// =============================================================================
// TAB: OVERVIEW
// =============================================================================

function OverviewTab() {
  const [overview, setOverview] = useState<ISMSOverview | null>(null)
  const [readiness, setReadiness] = useState<ReadinessCheck | null>(null)
  const [scope, setScope] = useState<ISMSScope | null>(null)
  const [loading, setLoading] = useState(true)
  const [running, setRunning] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const [ovRes, rdRes, scRes] = await Promise.allSettled([
        fetch(`${API}/overview`),
        fetch(`${API}/readiness-check/latest`),
        fetch(`${API}/scope`),
      ])
      if (ovRes.status === 'fulfilled' && ovRes.value.ok) setOverview(await ovRes.value.json())
      if (rdRes.status === 'fulfilled' && rdRes.value.ok) setReadiness(await rdRes.value.json())
      if (scRes.status === 'fulfilled' && scRes.value.ok) setScope(await scRes.value.json())
    } catch { /* ignore */ }
    setLoading(false)
  }, [])

  useEffect(() => { load() }, [load])

  const runCheck = async () => {
    setRunning(true)
    try {
      const res = await fetch(`${API}/readiness-check`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ triggered_by: 'admin-ui' }),
      })
      if (res.ok) {
        setReadiness(await res.json())
        load()
      }
    } catch { /* ignore */ }
    setRunning(false)
  }

  if (loading) return <LoadingSpinner />

  return (
    <div className="space-y-6">
      {/* Readiness Score */}
      <div className="bg-white border rounded-xl p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-gray-900">ISO 27001 Zertifizierungsbereitschaft</h3>
          <button
            onClick={runCheck}
            disabled={running}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 text-sm"
          >
            {running ? 'Pruefe...' : 'Readiness-Check starten'}
          </button>
        </div>

        {overview && (
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
            <StatCard
              label="Bereitschaft"
              value={`${Math.round(overview.certification_readiness)}%`}
              color={overview.certification_readiness >= 80 ? 'green' : overview.certification_readiness >= 50 ? 'yellow' : 'red'}
            />
            <StatCard label="Policies" value={`${overview.policies_approved}/${overview.policies_count}`} sub="genehmigt" color="blue" />
            <StatCard label="Ziele" value={`${overview.objectives_achieved}/${overview.objectives_count}`} sub="erreicht" color="blue" />
            <StatCard label="Major Findings" value={overview.open_major_findings} color={overview.open_major_findings > 0 ? 'red' : 'green'} />
            <StatCard label="Minor Findings" value={overview.open_minor_findings} color={overview.open_minor_findings > 0 ? 'yellow' : 'green'} />
          </div>
        )}

        {/* Chapter Overview */}
        {overview?.chapters && (
          <div>
            <h4 className="font-medium text-gray-700 mb-3">ISO 27001 Kapitel-Status</h4>
            <div className="space-y-2">
              {overview.chapters.map(ch => (
                <div key={ch.chapter} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                  <span className="font-mono text-sm font-bold text-gray-600 w-8">Kap.{ch.chapter}</span>
                  <span className="flex-1 text-sm font-medium text-gray-800">{ch.title}</span>
                  <div className="w-32">
                    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                      <div
                        className={`h-full rounded-full ${ch.completion_percentage >= 80 ? 'bg-green-500' : ch.completion_percentage >= 50 ? 'bg-yellow-500' : 'bg-red-500'}`}
                        style={{ width: `${ch.completion_percentage}%` }}
                      />
                    </div>
                  </div>
                  <span className="text-xs text-gray-500 w-10 text-right">{Math.round(ch.completion_percentage)}%</span>
                  <StatusBadge status={ch.status} />
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Readiness Findings */}
      {readiness && (
        <div className="bg-white border rounded-xl p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Readiness-Check Ergebnis</h3>
            <div className="flex items-center gap-2">
              <StatusBadge status={readiness.overall_status} size="md" />
              <span className="text-sm text-gray-500">Score: {Math.round(readiness.readiness_score)}%</span>
            </div>
          </div>

          {readiness.potential_majors.length > 0 && (
            <div className="mb-4">
              <h4 className="text-sm font-medium text-red-700 mb-2">Potenzielle Major-Findings ({readiness.potential_majors.length})</h4>
              <div className="space-y-2">
                {readiness.potential_majors.map((f, i) => (
                  <div key={i} className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                    <span className="text-red-500 mt-0.5">&#10006;</span>
                    <div>
                      <div className="text-sm font-medium text-gray-900">{f.check}</div>
                      <div className="text-xs text-gray-600 mt-0.5">{f.recommendation}</div>
                      <div className="text-xs text-gray-400 mt-0.5">ISO Referenz: {f.iso_reference}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {readiness.potential_minors.length > 0 && (
            <div className="mb-4">
              <h4 className="text-sm font-medium text-yellow-700 mb-2">Potenzielle Minor-Findings ({readiness.potential_minors.length})</h4>
              <div className="space-y-2">
                {readiness.potential_minors.map((f, i) => (
                  <div key={i} className="flex items-start gap-3 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <span className="text-yellow-500 mt-0.5">&#9888;</span>
                    <div>
                      <div className="text-sm font-medium text-gray-900">{f.check}</div>
                      <div className="text-xs text-gray-600 mt-0.5">{f.recommendation}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {readiness.priority_actions.length > 0 && (
            <div>
              <h4 className="text-sm font-medium text-gray-700 mb-2">Prioritaere Massnahmen</h4>
              <ol className="list-decimal list-inside text-sm text-gray-600 space-y-1">
                {readiness.priority_actions.map((a, i) => <li key={i}>{a}</li>)}
              </ol>
            </div>
          )}
        </div>
      )}

      {/* Scope Summary */}
      {scope && (
        <div className="bg-white border rounded-xl p-6">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-lg font-semibold text-gray-900">ISMS Scope (Kap. 4.3)</h3>
            <StatusBadge status={scope.status} size="md" />
          </div>
          <p className="text-sm text-gray-700 mb-3">{scope.scope_statement}</p>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-600">Standorte:</span>
              <ul className="list-disc list-inside text-gray-700 mt-1">
                {scope.included_locations?.map((l, i) => <li key={i}>{l}</li>)}
              </ul>
            </div>
            <div>
              <span className="font-medium text-gray-600">Prozesse:</span>
              <ul className="list-disc list-inside text-gray-700 mt-1">
                {scope.included_processes?.map((p, i) => <li key={i}>{p}</li>)}
              </ul>
            </div>
          </div>
          {scope.approved_by && (
            <div className="mt-3 text-xs text-gray-500">
              Genehmigt von {scope.approved_by} am {new Date(scope.approved_at!).toLocaleDateString('de-DE')}
            </div>
          )}
        </div>
      )}
    </div>
  )
}

// =============================================================================
// TAB: POLICIES
// =============================================================================

function PoliciesTab() {
  const [policies, setPolicies] = useState<ISMSPolicy[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreate, setShowCreate] = useState(false)
  const [filter, setFilter] = useState<string>('')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const url = filter ? `${API}/policies?policy_type=${filter}` : `${API}/policies`
      const res = await fetch(url)
      if (res.ok) {
        const data = await res.json()
        setPolicies(data.policies || [])
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [filter])

  useEffect(() => { load() }, [load])

  const createPolicy = async (form: Record<string, unknown>) => {
    try {
      const res = await fetch(`${API}/policies`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (res.ok) { setShowCreate(false); load() }
    } catch { /* ignore */ }
  }

  const approvePolicy = async (policyId: string) => {
    try {
      await fetch(`${API}/policies/${policyId}/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          reviewed_by: 'admin',
          approved_by: 'admin',
          effective_date: new Date().toISOString().split('T')[0],
        }),
      })
      load()
    } catch { /* ignore */ }
  }

  if (loading) return <LoadingSpinner />

  const policyTypes = ['master', 'topic', 'operational', 'standard']

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          <button onClick={() => setFilter('')} className={`px-3 py-1.5 rounded-lg text-sm ${!filter ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>Alle</button>
          {policyTypes.map(t => (
            <button key={t} onClick={() => setFilter(t)} className={`px-3 py-1.5 rounded-lg text-sm capitalize ${filter === t ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>{t}</button>
          ))}
        </div>
        <button onClick={() => setShowCreate(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">Neue Policy</button>
      </div>

      {policies.length === 0 ? (
        <EmptyState text="Keine Policies vorhanden" action="Policy erstellen" onAction={() => setShowCreate(true)} />
      ) : (
        <div className="space-y-3">
          {policies.map(p => (
            <div key={p.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{p.policy_id}</span>
                    <span className="text-sm font-medium text-gray-900">{p.title}</span>
                    <StatusBadge status={p.status} />
                    <span className="text-xs text-gray-400">v{p.version}</span>
                  </div>
                  <p className="text-xs text-gray-600 mt-1 line-clamp-2">{p.description}</p>
                  <div className="flex gap-3 mt-1 text-xs text-gray-500">
                    <span>Typ: {p.policy_type}</span>
                    <span>Review: alle {p.review_frequency_months} Monate</span>
                    {p.next_review_date && <span>Naechste Review: {new Date(p.next_review_date).toLocaleDateString('de-DE')}</span>}
                  </div>
                </div>
                {p.status === 'draft' && (
                  <button onClick={() => approvePolicy(p.id)} className="px-3 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs">Genehmigen</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Create Modal */}
      {showCreate && (
        <PolicyCreateModal onClose={() => setShowCreate(false)} onSave={createPolicy} />
      )}
    </div>
  )
}

function PolicyCreateModal({ onClose, onSave }: { onClose: () => void; onSave: (data: Record<string, unknown>) => void }) {
  const [form, setForm] = useState({
    policy_id: '', title: '', policy_type: 'topic', description: '', policy_text: '',
    applies_to: ['Alle Mitarbeiter'], review_frequency_months: 12, related_controls: [] as string[],
    authored_by: 'admin',
  })

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
        <h3 className="text-lg font-semibold mb-4">Neue ISMS Policy</h3>
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Policy-ID</label>
              <input value={form.policy_id} onChange={e => setForm({ ...form, policy_id: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" placeholder="z.B. POL-SEC-001" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Typ</label>
              <select value={form.policy_type} onChange={e => setForm({ ...form, policy_type: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm">
                <option value="master">Master Policy</option>
                <option value="topic">Topic Policy</option>
                <option value="operational">Operational</option>
                <option value="standard">Standard</option>
              </select>
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Titel</label>
            <input value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Beschreibung</label>
            <textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" rows={2} />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Policy-Text</label>
            <textarea value={form.policy_text} onChange={e => setForm({ ...form, policy_text: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" rows={5} />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Review-Frequenz (Monate)</label>
              <input type="number" value={form.review_frequency_months} onChange={e => setForm({ ...form, review_frequency_months: Number(e.target.value) })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Autor</label>
              <input value={form.authored_by} onChange={e => setForm({ ...form, authored_by: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          <button onClick={() => onSave(form)} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">Erstellen</button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// TAB: SOA (Statement of Applicability)
// =============================================================================

function SoATab() {
  const [entries, setEntries] = useState<SoAEntry[]>([])
  const [stats, setStats] = useState({ applicable: 0, notApplicable: 0, implemented: 0, planned: 0 })
  const [loading, setLoading] = useState(true)
  const [filterStatus, setFilterStatus] = useState('')
  const [filterApplicable, setFilterApplicable] = useState<string>('')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      if (filterStatus) params.set('implementation_status', filterStatus)
      if (filterApplicable) params.set('is_applicable', filterApplicable)
      const res = await fetch(`${API}/soa?${params}`)
      if (res.ok) {
        const data = await res.json()
        setEntries(data.entries || [])
        setStats({
          applicable: data.applicable_count || 0,
          notApplicable: data.not_applicable_count || 0,
          implemented: data.implemented_count || 0,
          planned: data.planned_count || 0,
        })
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [filterStatus, filterApplicable])

  useEffect(() => { load() }, [load])

  if (loading) return <LoadingSpinner />

  return (
    <div className="space-y-4">
      {/* Stats */}
      <div className="grid grid-cols-4 gap-3">
        <StatCard label="Anwendbar" value={stats.applicable} color="blue" />
        <StatCard label="Nicht anwendbar" value={stats.notApplicable} color="purple" />
        <StatCard label="Implementiert" value={stats.implemented} color="green" />
        <StatCard label="Geplant" value={stats.planned} color="yellow" />
      </div>

      {/* Filters */}
      <div className="flex gap-2">
        <select value={filterApplicable} onChange={e => setFilterApplicable(e.target.value)} className="border rounded-lg px-3 py-1.5 text-sm">
          <option value="">Alle Controls</option>
          <option value="true">Anwendbar</option>
          <option value="false">Nicht anwendbar</option>
        </select>
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} className="border rounded-lg px-3 py-1.5 text-sm">
          <option value="">Alle Status</option>
          <option value="implemented">Implementiert</option>
          <option value="planned">Geplant</option>
          <option value="not_started">Nicht gestartet</option>
          <option value="not_applicable">N/A</option>
        </select>
      </div>

      {entries.length === 0 ? (
        <EmptyState text="Noch keine SoA-Eintraege vorhanden. Erstellen Sie Eintraege fuer alle 93 Annex-A-Controls." />
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-gray-50 text-left">
                <th className="px-3 py-2 font-medium text-gray-600">Control</th>
                <th className="px-3 py-2 font-medium text-gray-600">Titel</th>
                <th className="px-3 py-2 font-medium text-gray-600">Kategorie</th>
                <th className="px-3 py-2 font-medium text-gray-600">Anwendbar</th>
                <th className="px-3 py-2 font-medium text-gray-600">Status</th>
                <th className="px-3 py-2 font-medium text-gray-600">Coverage</th>
                <th className="px-3 py-2 font-medium text-gray-600">Version</th>
              </tr>
            </thead>
            <tbody>
              {entries.map(e => (
                <tr key={e.id} className="border-t hover:bg-gray-50">
                  <td className="px-3 py-2 font-mono text-xs">{e.annex_a_control}</td>
                  <td className="px-3 py-2 text-gray-800">{e.annex_a_title}</td>
                  <td className="px-3 py-2 text-gray-600">{e.annex_a_category}</td>
                  <td className="px-3 py-2">
                    <span className={`px-2 py-0.5 rounded-full text-xs ${e.is_applicable ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
                      {e.is_applicable ? 'Ja' : 'Nein'}
                    </span>
                  </td>
                  <td className="px-3 py-2"><StatusBadge status={e.implementation_status} /></td>
                  <td className="px-3 py-2 text-xs text-gray-600">{e.coverage_level || '-'}</td>
                  <td className="px-3 py-2 text-xs text-gray-400">v{e.version}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}

// =============================================================================
// TAB: OBJECTIVES
// =============================================================================

function ObjectivesTab() {
  const [objectives, setObjectives] = useState<SecurityObjective[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreate, setShowCreate] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetch(`${API}/objectives`)
      if (res.ok) {
        const data = await res.json()
        setObjectives(data.objectives || [])
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [])

  useEffect(() => { load() }, [load])

  const createObjective = async (form: Record<string, unknown>) => {
    try {
      const res = await fetch(`${API}/objectives?created_by=admin`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (res.ok) { setShowCreate(false); load() }
    } catch { /* ignore */ }
  }

  if (loading) return <LoadingSpinner />

  const active = objectives.filter(o => o.status === 'active')
  const achieved = objectives.filter(o => o.status === 'achieved')

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-3 text-sm text-gray-600">
          <span>Aktiv: {active.length}</span>
          <span>Erreicht: {achieved.length}</span>
        </div>
        <button onClick={() => setShowCreate(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">Neues Ziel</button>
      </div>

      {objectives.length === 0 ? (
        <EmptyState text="Keine Sicherheitsziele definiert" action="Ziel erstellen" onAction={() => setShowCreate(true)} />
      ) : (
        <div className="space-y-3">
          {objectives.map(o => (
            <div key={o.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs text-gray-500">{o.objective_id}</span>
                  <span className="text-sm font-medium text-gray-900">{o.title}</span>
                  <StatusBadge status={o.status} />
                </div>
                <span className="text-sm font-bold text-purple-600">{o.progress_percentage}%</span>
              </div>
              <div className="h-2 bg-gray-200 rounded-full overflow-hidden mb-2">
                <div
                  className={`h-full rounded-full transition-all ${o.progress_percentage >= 100 ? 'bg-green-500' : 'bg-purple-500'}`}
                  style={{ width: `${Math.min(100, o.progress_percentage)}%` }}
                />
              </div>
              <div className="flex gap-4 text-xs text-gray-500">
                <span>KPI: {o.kpi_name} — Ziel: {o.kpi_target} {o.kpi_unit}</span>
                <span>Verantwortlich: {o.owner}</span>
                <span>Zieldatum: {new Date(o.target_date).toLocaleDateString('de-DE')}</span>
                <span>Messung: {o.measurement_frequency}</span>
              </div>
            </div>
          ))}
        </div>
      )}

      {showCreate && (
        <ObjectiveCreateModal onClose={() => setShowCreate(false)} onSave={createObjective} />
      )}
    </div>
  )
}

function ObjectiveCreateModal({ onClose, onSave }: { onClose: () => void; onSave: (data: Record<string, unknown>) => void }) {
  const [form, setForm] = useState({
    objective_id: '', title: '', description: '', category: 'confidentiality',
    specific: '', measurable: '', achievable: '', relevant: '', time_bound: '',
    kpi_name: '', kpi_target: 95, kpi_unit: '%', measurement_frequency: 'monthly',
    owner: '', target_date: '', related_controls: [] as string[], related_risks: [] as string[],
  })

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6">
        <h3 className="text-lg font-semibold mb-4">Neues Sicherheitsziel (SMART)</h3>
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Ziel-ID</label>
              <input value={form.objective_id} onChange={e => setForm({ ...form, objective_id: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" placeholder="OBJ-001" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Kategorie</label>
              <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm">
                <option value="confidentiality">Vertraulichkeit</option>
                <option value="integrity">Integritaet</option>
                <option value="availability">Verfuegbarkeit</option>
                <option value="compliance">Compliance</option>
                <option value="awareness">Awareness</option>
              </select>
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Titel</label>
            <input value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Beschreibung</label>
            <textarea value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" rows={2} />
          </div>
          <div className="grid grid-cols-3 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">KPI Name</label>
              <input value={form.kpi_name} onChange={e => setForm({ ...form, kpi_name: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" placeholder="Patch-Rate" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Zielwert</label>
              <input type="number" value={form.kpi_target} onChange={e => setForm({ ...form, kpi_target: Number(e.target.value) })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Einheit</label>
              <input value={form.kpi_unit} onChange={e => setForm({ ...form, kpi_unit: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Verantwortlich</label>
              <input value={form.owner} onChange={e => setForm({ ...form, owner: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Zieldatum</label>
              <input type="date" value={form.target_date} onChange={e => setForm({ ...form, target_date: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          <button onClick={() => onSave(form)} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">Erstellen</button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// TAB: AUDITS (Internal Audits + Findings + CAPA)
// =============================================================================

function AuditsTab() {
  const [audits, setAudits] = useState<InternalAudit[]>([])
  const [findings, setFindings] = useState<AuditFinding[]>([])
  const [capas, setCAPAs] = useState<CAPA[]>([])
  const [loading, setLoading] = useState(true)
  const [subTab, setSubTab] = useState<'audits' | 'findings' | 'capa'>('audits')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const [aRes, fRes, cRes] = await Promise.all([
        fetch(`${API}/internal-audits`),
        fetch(`${API}/findings`),
        fetch(`${API}/capa`),
      ])
      if (aRes.ok) { const d = await aRes.json(); setAudits(d.audits || []) }
      if (fRes.ok) { const d = await fRes.json(); setFindings(d.findings || []) }
      if (cRes.ok) { const d = await cRes.json(); setCAPAs(d.actions || []) }
    } catch { /* ignore */ }
    setLoading(false)
  }, [])

  useEffect(() => { load() }, [load])

  if (loading) return <LoadingSpinner />

  const openFindings = findings.filter(f => f.status !== 'closed')
  const majors = findings.filter(f => f.finding_type === 'major')

  return (
    <div className="space-y-4">
      {/* Stats */}
      <div className="grid grid-cols-4 gap-3">
        <StatCard label="Interne Audits" value={audits.length} color="blue" />
        <StatCard label="Offene Findings" value={openFindings.length} color={openFindings.length > 0 ? 'red' : 'green'} />
        <StatCard label="Major Findings" value={majors.length} color={majors.length > 0 ? 'red' : 'green'} />
        <StatCard label="CAPAs" value={capas.length} color="purple" />
      </div>

      {/* Sub-tabs */}
      <div className="flex gap-2 border-b">
        {(['audits', 'findings', 'capa'] as const).map(t => (
          <button key={t} onClick={() => setSubTab(t)}
            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${subTab === t ? 'border-purple-600 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
          >
            {t === 'audits' ? 'Interne Audits' : t === 'findings' ? 'Findings' : 'CAPA'}
          </button>
        ))}
      </div>

      {subTab === 'audits' && (
        <div className="space-y-3">
          {audits.length === 0 ? <EmptyState text="Noch keine internen Audits geplant" /> : audits.map(a => (
            <div key={a.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{a.audit_id}</span>
                    <span className="text-sm font-medium text-gray-900">{a.title}</span>
                    <StatusBadge status={a.status} />
                  </div>
                  <div className="flex gap-3 text-xs text-gray-500 mt-1">
                    <span>Typ: {a.audit_type}</span>
                    <span>Datum: {new Date(a.planned_date).toLocaleDateString('de-DE')}</span>
                    <span>Auditor: {a.lead_auditor}</span>
                    <span>Findings: {a.total_findings || 0} (Major: {a.major_findings || 0}, Minor: {a.minor_findings || 0})</span>
                  </div>
                </div>
              </div>
              {a.audit_conclusion && (
                <p className="text-xs text-gray-600 mt-2 bg-gray-50 rounded p-2">{a.audit_conclusion}</p>
              )}
            </div>
          ))}
        </div>
      )}

      {subTab === 'findings' && (
        <div className="space-y-3">
          {findings.length === 0 ? <EmptyState text="Keine Audit-Findings vorhanden" /> : findings.map(f => (
            <div key={f.id} className={`bg-white border rounded-xl p-4 ${f.is_blocking ? 'border-red-300' : ''}`}>
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{f.finding_id}</span>
                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                      f.finding_type === 'major' ? 'bg-red-100 text-red-700' :
                      f.finding_type === 'minor' ? 'bg-yellow-100 text-yellow-700' :
                      f.finding_type === 'ofi' ? 'bg-blue-100 text-blue-700' :
                      'bg-green-100 text-green-700'
                    }`}>{f.finding_type.toUpperCase()}</span>
                    <span className="text-sm font-medium text-gray-900">{f.title}</span>
                    <StatusBadge status={f.status} />
                    {f.is_blocking && <span className="px-2 py-0.5 bg-red-600 text-white text-xs rounded-full">Blockiert</span>}
                  </div>
                  <p className="text-xs text-gray-600 mt-1">{f.description}</p>
                  <div className="flex gap-3 text-xs text-gray-500 mt-1">
                    <span>ISO: {f.iso_chapter}</span>
                    <span>Verantwortlich: {f.owner}</span>
                    <span>Auditor: {f.auditor}</span>
                    {f.due_date && <span>Frist: {new Date(f.due_date).toLocaleDateString('de-DE')}</span>}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {subTab === 'capa' && (
        <div className="space-y-3">
          {capas.length === 0 ? <EmptyState text="Keine Korrektur-/Vorbeugungsmassnahmen vorhanden" /> : capas.map(c => (
            <div key={c.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{c.capa_id}</span>
                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${c.capa_type === 'corrective' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}`}>
                      {c.capa_type === 'corrective' ? 'Korrektur' : 'Vorbeugung'}
                    </span>
                    <span className="text-sm font-medium text-gray-900">{c.title}</span>
                    <StatusBadge status={c.status} />
                  </div>
                  <div className="flex gap-3 text-xs text-gray-500 mt-1">
                    <span>Zustaendig: {c.assigned_to}</span>
                    <span>Ziel: {new Date(c.planned_completion).toLocaleDateString('de-DE')}</span>
                    {c.actual_completion && <span>Abgeschlossen: {new Date(c.actual_completion).toLocaleDateString('de-DE')}</span>}
                    {c.effectiveness_verified !== null && (
                      <span className={c.effectiveness_verified ? 'text-green-600' : 'text-red-600'}>
                        Wirksamkeit: {c.effectiveness_verified ? 'Bestaetigt' : 'Nicht bestaetigt'}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

// =============================================================================
// TAB: MANAGEMENT REVIEWS
// =============================================================================

function ReviewsTab() {
  const [reviews, setReviews] = useState<ManagementReview[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreate, setShowCreate] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetch(`${API}/management-reviews`)
      if (res.ok) {
        const data = await res.json()
        setReviews(data.reviews || [])
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [])

  useEffect(() => { load() }, [load])

  const createReview = async (form: Record<string, unknown>) => {
    try {
      const res = await fetch(`${API}/management-reviews?created_by=admin`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (res.ok) { setShowCreate(false); load() }
    } catch { /* ignore */ }
  }

  const approveReview = async (reviewId: string) => {
    const nextYear = new Date()
    nextYear.setFullYear(nextYear.getFullYear() + 1)
    try {
      await fetch(`${API}/management-reviews/${reviewId}/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          approved_by: 'admin',
          next_review_date: nextYear.toISOString().split('T')[0],
        }),
      })
      load()
    } catch { /* ignore */ }
  }

  if (loading) return <LoadingSpinner />

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium text-gray-600">{reviews.length} Management-Reviews</h3>
        <button onClick={() => setShowCreate(true)} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">Neue Review</button>
      </div>

      {reviews.length === 0 ? (
        <EmptyState text="Keine Management-Reviews vorhanden" action="Review planen" onAction={() => setShowCreate(true)} />
      ) : (
        <div className="space-y-3">
          {reviews.map(r => (
            <div key={r.id} className="bg-white border rounded-xl p-4">
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-xs text-gray-500">{r.review_id}</span>
                    <span className="text-sm font-medium text-gray-900">{r.title}</span>
                    <StatusBadge status={r.status} />
                  </div>
                  <div className="flex gap-3 text-xs text-gray-500 mt-1">
                    <span>Datum: {new Date(r.review_date).toLocaleDateString('de-DE')}</span>
                    <span>Zeitraum: {new Date(r.review_period_start).toLocaleDateString('de-DE')} - {new Date(r.review_period_end).toLocaleDateString('de-DE')}</span>
                    <span>Vorsitz: {r.chairperson}</span>
                    {r.next_review_date && <span>Naechste Review: {new Date(r.next_review_date).toLocaleDateString('de-DE')}</span>}
                  </div>
                </div>
                {r.status === 'draft' && (
                  <button onClick={() => approveReview(r.id)} className="px-3 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs">Genehmigen</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {showCreate && (
        <ReviewCreateModal onClose={() => setShowCreate(false)} onSave={createReview} />
      )}
    </div>
  )
}

function ReviewCreateModal({ onClose, onSave }: { onClose: () => void; onSave: (data: Record<string, unknown>) => void }) {
  const today = new Date().toISOString().split('T')[0]
  const [form, setForm] = useState({
    title: '', review_date: today,
    review_period_start: '', review_period_end: today,
    chairperson: '', attendees: [] as Record<string, unknown>[],
  })

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
        <h3 className="text-lg font-semibold mb-4">Neue Management-Review</h3>
        <div className="space-y-3">
          <div>
            <label className="text-xs font-medium text-gray-600">Titel</label>
            <input value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" placeholder="Q1 2026 Management Review" />
          </div>
          <div className="grid grid-cols-3 gap-3">
            <div>
              <label className="text-xs font-medium text-gray-600">Review-Datum</label>
              <input type="date" value={form.review_date} onChange={e => setForm({ ...form, review_date: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Zeitraum von</label>
              <input type="date" value={form.review_period_start} onChange={e => setForm({ ...form, review_period_start: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
            <div>
              <label className="text-xs font-medium text-gray-600">Zeitraum bis</label>
              <input type="date" value={form.review_period_end} onChange={e => setForm({ ...form, review_period_end: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
            </div>
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Vorsitzender</label>
            <input value={form.chairperson} onChange={e => setForm({ ...form, chairperson: e.target.value })} className="w-full border rounded-lg px-3 py-2 text-sm" />
          </div>
        </div>
        <div className="flex justify-end gap-2 mt-6">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          <button onClick={() => onSave(form)} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">Erstellen</button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// MAIN PAGE
// =============================================================================

const TABS: { id: TabId; label: string }[] = [
  { id: 'overview', label: 'Uebersicht' },
  { id: 'policies', label: 'Policies' },
  { id: 'soa', label: 'SoA (Annex A)' },
  { id: 'objectives', label: 'Ziele' },
  { id: 'audits', label: 'Audits & Findings' },
  { id: 'reviews', label: 'Management Reviews' },
]

export default function ISMSPage() {
  const [tab, setTab] = useState<TabId>('overview')
  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">ISMS — ISO 27001</h1>
          <p className="text-sm text-gray-600 mt-1">
            Informationssicherheits-Managementsystem: Scope, Policies, SoA, Audits, CAPA und Management-Reviews
          </p>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 bg-white border rounded-xl p-1 mb-6">
          {TABS.map(t => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`flex-1 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                tab === t.id
                  ? 'bg-purple-600 text-white shadow-sm'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        {tab === 'overview' && <OverviewTab />}
        {tab === 'policies' && <PoliciesTab />}
        {tab === 'soa' && <SoATab />}
        {tab === 'objectives' && <ObjectivesTab />}
        {tab === 'audits' && <AuditsTab />}
        {tab === 'reviews' && <ReviewsTab />}
      </div>
    </div>
  )
}