breakpilot-compliance/admin-compliance/app/sdk/master-controls/page.tsx

'use client'

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

interface MC {
  id: string
  master_control_id: string
  canonical_name: string
  total_controls: number
  phases_covered: string[]
  phase_control_count: Record<string, number>
}

interface Member {
  control_id: string
  title: string
  objective: string
  severity: string
  phase: string
  action: string
  regulation_source: string
  regulation_article: string
}

const API = '/api/sdk/v1/master-controls'
const PAGE_SIZE = 50

const SEV_COLORS: Record<string, string> = {
  critical: 'bg-red-100 text-red-800',
  high: 'bg-orange-100 text-orange-800',
  medium: 'bg-yellow-100 text-yellow-800',
  low: 'bg-blue-100 text-blue-800',
}

export default function MasterControlsPage() {
  const [mcs, setMcs] = useState<MC[]>([])
  const [total, setTotal] = useState(0)
  const [offset, setOffset] = useState(0)
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState('total_controls')
  const [sortOrder, setSortOrder] = useState('DESC')
  const [loading, setLoading] = useState(false)

  // Detail view
  const [selectedMC, setSelectedMC] = useState<MC | null>(null)
  const [members, setMembers] = useState<Member[]>([])
  const [membersLoading, setMembersLoading] = useState(false)

  const loadMCs = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams({
        action: 'list', limit: String(PAGE_SIZE), offset: String(offset),
        sort: sortBy, order: sortOrder,
      })
      if (search) params.set('search', search)
      const res = await fetch(`${API}?${params}`)
      if (res.ok) {
        const data = await res.json()
        setMcs(data.master_controls || [])
        setTotal(data.total || 0)
      }
    } catch { /* ignore */ }
    setLoading(false)
  }, [offset, search, sortBy, sortOrder])

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

  const loadMembers = async (mc: MC) => {
    setSelectedMC(mc)
    setMembersLoading(true)
    try {
      const res = await fetch(`${API}?action=members&mc_id=${mc.master_control_id}&limit=200`)
      if (res.ok) {
        const data = await res.json()
        setMembers(data.members || [])
      }
    } catch { /* ignore */ }
    setMembersLoading(false)
  }

  const handleSort = (field: string) => {
    if (sortBy === field) {
      setSortOrder(sortOrder === 'DESC' ? 'ASC' : 'DESC')
    } else {
      setSortBy(field)
      setSortOrder('DESC')
    }
    setOffset(0)
  }

  const totalPages = Math.ceil(total / PAGE_SIZE)
  const currentPage = Math.floor(offset / PAGE_SIZE) + 1

  // L1 token = part before first underscore that has a sub-part
  const getL1Token = (name: string) => {
    const parts = name.split('_')
    // Find the longest known L1 prefix
    for (let i = Math.min(parts.length, 3); i >= 1; i--) {
      const candidate = parts.slice(0, i).join('_')
      if (['access_control', 'audit_logging', 'key_management', 'risk_management',
           'network_security', 'network_segmentation', 'multi_factor_auth',
           'transport_encryption', 'data_subject_rights', 'data_breach_notification',
           'data_processing_agreement', 'data_processing_register',
           'third_party_management', 'change_management', 'human_resources_security',
           'physical_security', 'secure_development', 'api_security',
           'input_validation', 'container_security', 'logging_configuration',
           'cookie_consent', 'video_surveillance', 'supply_chain_due_diligence',
           'critical_infrastructure', 'sustainability_reporting',
           'financial_reporting', 'consumer_protection', 'compliance_audit',
           'asset_management', 'disaster_recovery', 'patch_management',
           'password_policy', 'session_management', 'privileged_access',
           'certificate_management', 'personal_data', 'sensitive_data',
           'health_data', 'product_safety', 'medical_device', 'payment_services',
           'supervisory_authority', 'data_retention', 'data_transfer',
           'data_classification', 'privacy_by_design',
          ].includes(candidate)) return candidate
    }
    return parts[0]
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-7xl mx-auto px-4">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-gray-900">Master Controls</h1>
          <p className="text-gray-600 mt-1">
            {total.toLocaleString()} Master Controls mit {mcs.reduce((s, m) => s + m.total_controls, 0).toLocaleString()}+ Atomic Controls
          </p>
        </div>

        {/* Search + Filters */}
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
          <div className="flex items-center gap-3">
            <input
              type="text"
              placeholder="Suche nach MC-Name (z.B. encryption, incident, access_control)..."
              value={search}
              onChange={e => { setSearch(e.target.value); setOffset(0) }}
              className="flex-1 px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            />
            <span className="text-sm text-gray-500 whitespace-nowrap">
              Seite {currentPage} von {totalPages}
            </span>
          </div>
        </div>

        <div className="flex gap-4">
          {/* MC List */}
          <div className={`${selectedMC ? 'w-1/2' : 'w-full'} transition-all`}>
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
              <table className="w-full">
                <thead className="bg-gray-50 border-b">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
                        onClick={() => handleSort('canonical_name')}>
                      Name {sortBy === 'canonical_name' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase cursor-pointer hover:text-purple-600"
                        onClick={() => handleSort('total_controls')}>
                      Controls {sortBy === 'total_controls' ? (sortOrder === 'ASC' ? '↑' : '↓') : ''}
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Phasen</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {loading ? (
                    <tr><td colSpan={3} className="px-4 py-8 text-center text-gray-400">Laden...</td></tr>
                  ) : mcs.map(mc => {
                    const l1 = getL1Token(mc.canonical_name)
                    const l2 = mc.canonical_name.slice(l1.length + 1) || ''
                    return (
                      <tr
                        key={mc.id}
                        onClick={() => loadMembers(mc)}
                        className={`cursor-pointer hover:bg-purple-50 transition-colors ${
                          selectedMC?.id === mc.id ? 'bg-purple-100' : ''
                        }`}
                      >
                        <td className="px-4 py-3">
                          <span className="text-xs font-mono bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
                            {l1}
                          </span>
                          {l2 && (
                            <span className="ml-1.5 text-sm text-gray-700">{l2.replace(/_/g, ' ')}</span>
                          )}
                        </td>
                        <td className="px-4 py-3 text-right text-sm font-medium text-gray-900">
                          {mc.total_controls}
                        </td>
                        <td className="px-4 py-3 text-right text-sm text-gray-500">
                          {(mc.phases_covered || []).length}
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

              {/* Pagination */}
              <div className="flex items-center justify-between px-4 py-3 border-t bg-gray-50">
                <button
                  onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
                  disabled={offset === 0}
                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
                >
                  Zurueck
                </button>
                <span className="text-xs text-gray-500">
                  {offset + 1}-{Math.min(offset + PAGE_SIZE, total)} von {total}
                </span>
                <button
                  onClick={() => setOffset(offset + PAGE_SIZE)}
                  disabled={offset + PAGE_SIZE >= total}
                  className="px-3 py-1 text-sm border rounded disabled:opacity-50"
                >
                  Weiter
                </button>
              </div>
            </div>
          </div>

          {/* Member Detail Panel */}
          {selectedMC && (
            <div className="w-1/2">
              <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-4">
                <div className="px-4 py-3 bg-purple-50 border-b flex items-center justify-between">
                  <div>
                    <h2 className="font-semibold text-purple-900">{selectedMC.canonical_name}</h2>
                    <p className="text-xs text-purple-600">{selectedMC.total_controls} Controls, {(selectedMC.phases_covered || []).length} Phasen</p>
                  </div>
                  <button onClick={() => setSelectedMC(null)} className="text-purple-400 hover:text-purple-600 text-lg">&times;</button>
                </div>

                <div className="max-h-[70vh] overflow-y-auto">
                  {membersLoading ? (
                    <div className="p-8 text-center text-gray-400">Laden...</div>
                  ) : members.map((m, i) => (
                    <div key={i} className="px-4 py-3 border-b border-gray-50 hover:bg-gray-50">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-xs font-mono text-gray-400">{m.control_id}</span>
                        {m.severity && (
                          <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${SEV_COLORS[m.severity] || ''}`}>
                            {m.severity}
                          </span>
                        )}
                        <span className="text-[10px] text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">{m.phase}</span>
                      </div>
                      <p className="text-sm text-gray-900">{m.title}</p>
                      {m.regulation_source && (
                        <p className="text-xs text-blue-600 mt-1">{m.regulation_source} {m.regulation_article}</p>
                      )}
                    </div>
                  ))}
                  {members.length === 0 && !membersLoading && (
                    <div className="p-8 text-center text-gray-400">Keine Members gefunden</div>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}