breakpilot-compliance/admin-compliance/components/sdk/ProjectSelector/ProjectSelector.tsx

'use client'

import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useSDK } from '@/lib/sdk'
import type { ProjectInfo, CustomerType } from '@/lib/sdk/types'

// =============================================================================
// HELPERS
// =============================================================================

/** Map snake_case backend response to camelCase ProjectInfo */
function normalizeProject(p: any): ProjectInfo {
  return {
    id: p.id,
    name: p.name,
    description: p.description || '',
    customerType: p.customerType || p.customer_type || 'new',
    status: p.status || 'active',
    projectVersion: p.projectVersion ?? p.project_version ?? 1,
    completionPercentage: p.completionPercentage ?? p.completion_percentage ?? 0,
    createdAt: p.createdAt || p.created_at || '',
    updatedAt: p.updatedAt || p.updated_at || '',
  }
}

function formatTimeAgo(dateStr: string): string {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  if (isNaN(date.getTime())) return ''
  const now = Date.now()
  const diff = now - date.getTime()
  const seconds = Math.floor(diff / 1000)
  if (seconds < 60) return 'Gerade eben'
  const minutes = Math.floor(seconds / 60)
  if (minutes < 60) return `vor ${minutes} Min`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `vor ${hours} Std`
  const days = Math.floor(hours / 24)
  return `vor ${days} Tag${days > 1 ? 'en' : ''}`
}

// =============================================================================
// CREATE PROJECT DIALOG
// =============================================================================

interface CreateProjectDialogProps {
  open: boolean
  onClose: () => void
  onCreated: (project: ProjectInfo) => void
  existingProjects: ProjectInfo[]
}

function CreateProjectDialog({ open, onClose, onCreated, existingProjects }: CreateProjectDialogProps) {
  const { createProject } = useSDK()
  const [name, setName] = useState('')
  const [customerType, setCustomerType] = useState<CustomerType>('new')
  const [copyFromId, setCopyFromId] = useState<string>('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState('')

  if (!open) return null

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim()) {
      setError('Projektname ist erforderlich')
      return
    }

    setIsSubmitting(true)
    setError('')
    try {
      const project = await createProject(
        name.trim(),
        customerType,
        copyFromId || undefined
      )
      onCreated(normalizeProject(project))
      setName('')
      setCopyFromId('')
      onClose()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Fehler beim Erstellen des Projekts')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div
        className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6"
        onClick={e => e.stopPropagation()}
      >
        <h2 className="text-xl font-bold text-gray-900 mb-6">Neues Projekt erstellen</h2>

        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Project Name */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Projektname *
            </label>
            <input
              type="text"
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder="z.B. KI-Produkt X, SaaS API, Tochter GmbH..."
              className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
              autoFocus
            />
          </div>

          {/* Customer Type */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Projekttyp
            </label>
            <div className="grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setCustomerType('new')}
                className={`p-3 rounded-lg border-2 text-left transition-all ${
                  customerType === 'new'
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200 hover:border-gray-300'
                }`}
              >
                <div className="font-medium text-sm text-gray-900">Neukunde</div>
                <div className="text-xs text-gray-500 mt-0.5">Compliance von Grund auf</div>
              </button>
              <button
                type="button"
                onClick={() => setCustomerType('existing')}
                className={`p-3 rounded-lg border-2 text-left transition-all ${
                  customerType === 'existing'
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200 hover:border-gray-300'
                }`}
              >
                <div className="font-medium text-sm text-gray-900">Bestandskunde</div>
                <div className="text-xs text-gray-500 mt-0.5">Bestehende Dokumente erweitern</div>
              </button>
            </div>
          </div>

          {/* Copy from existing project */}
          {existingProjects.length > 0 && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Stammdaten kopieren von (optional)
              </label>
              <select
                value={copyFromId}
                onChange={e => setCopyFromId(e.target.value)}
                className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none bg-white"
              >
                <option value="">— Keine Kopie (leeres Projekt) —</option>
                {existingProjects.map(p => (
                  <option key={p.id} value={p.id}>
                    {p.name} (V{String(p.projectVersion).padStart(3, '0')})
                  </option>
                ))}
              </select>
              <p className="mt-1 text-xs text-gray-500">
                Firmenprofil wird kopiert und kann dann unabhaengig bearbeitet werden.
              </p>
            </div>
          )}

          {/* Error */}
          {error && (
            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
              {error}
            </div>
          )}

          {/* Actions */}
          <div className="flex gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              disabled={isSubmitting || !name.trim()}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 disabled:bg-purple-300 rounded-lg transition-colors"
            >
              {isSubmitting ? 'Erstelle...' : 'Projekt erstellen'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

// =============================================================================
// PROJECT ACTION DIALOG (Archive / Permanent Delete)
// =============================================================================

type ActionStep = 'choose' | 'confirm-delete'

function ProjectActionDialog({
  project,
  onArchive,
  onPermanentDelete,
  onCancel,
  isProcessing,
}: {
  project: ProjectInfo
  onArchive: () => void
  onPermanentDelete: () => void
  onCancel: () => void
  isProcessing: boolean
}) {
  const [step, setStep] = useState<ActionStep>('choose')

  if (step === 'confirm-delete') {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
        <div
          className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
          onClick={e => e.stopPropagation()}
        >
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            <h2 className="text-lg font-bold text-red-700">Endgueltig loeschen</h2>
          </div>

          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <p className="text-sm text-red-800 font-medium mb-2">
              Sind Sie sicher, dass Sie <strong>{project.name}</strong> unwiderruflich loeschen moechten?
            </p>
            <p className="text-sm text-red-700">
              Alle Projektdaten, SDK-States und Dokumente werden permanent geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
            </p>
          </div>

          <div className="flex gap-3">
            <button
              onClick={() => setStep('choose')}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
            >
              Zurueck
            </button>
            <button
              onClick={onPermanentDelete}
              disabled={isProcessing}
              className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-red-700 hover:bg-red-800 disabled:bg-red-300 rounded-lg transition-colors"
            >
              {isProcessing ? 'Loesche...' : 'Endgueltig loeschen'}
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
      <div
        className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center gap-3 mb-4">
          <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </div>
          <h2 className="text-lg font-bold text-gray-900">Projekt entfernen</h2>
        </div>

        <p className="text-gray-600 mb-6">
          Was moechten Sie mit dem Projekt <strong>{project.name}</strong> tun?
        </p>

        <div className="space-y-3 mb-6">
          {/* Archive option */}
          <button
            onClick={onArchive}
            disabled={isProcessing}
            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-orange-300 hover:bg-orange-50 transition-all text-left disabled:opacity-50"
          >
            <div className="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
              </svg>
            </div>
            <div>
              <div className="font-medium text-gray-900">Archivieren</div>
              <div className="text-sm text-gray-500">
                Projekt wird ausgeblendet, Daten bleiben erhalten. Kann jederzeit wiederhergestellt werden.
              </div>
            </div>
          </button>

          {/* Permanent delete option */}
          <button
            onClick={() => setStep('confirm-delete')}
            disabled={isProcessing}
            className="w-full flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-red-300 hover:bg-red-50 transition-all text-left disabled:opacity-50"
          >
            <div className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
            </div>
            <div>
              <div className="font-medium text-red-700">Endgueltig loeschen</div>
              <div className="text-sm text-gray-500">
                Alle Daten werden unwiderruflich geloescht. Diese Aktion kann nicht rueckgaengig gemacht werden.
              </div>
            </div>
          </button>
        </div>

        <button
          onClick={onCancel}
          className="w-full px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
        >
          Abbrechen
        </button>
      </div>
    </div>
  )
}

// =============================================================================
// PROJECT CARD
// =============================================================================

function ProjectCard({
  project,
  onClick,
  onDelete,
  onRestore,
}: {
  project: ProjectInfo
  onClick: () => void
  onDelete?: () => void
  onRestore?: () => void
}) {
  const timeAgo = formatTimeAgo(project.updatedAt)
  const isArchived = project.status === 'archived'

  return (
    <div className={`relative bg-white rounded-xl border-2 transition-all ${
      isArchived
        ? 'border-gray-200 opacity-75'
        : 'border-gray-200 hover:border-purple-300 hover:shadow-lg'
    }`}>
      {/* Action buttons */}
      <div className="absolute top-3 right-3 flex items-center gap-1 z-10">
        {isArchived && onRestore && (
          <button
            onClick={e => {
              e.stopPropagation()
              onRestore()
            }}
            className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
            title="Wiederherstellen"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>
        )}
        {onDelete && (
          <button
            onClick={e => {
              e.stopPropagation()
              onDelete()
            }}
            className="p-1.5 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
            title="Entfernen"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        )}
      </div>

      {/* Card content */}
      <button
        onClick={onClick}
        className="block w-full text-left p-6"
      >
        <div className="flex items-start justify-between mb-3 pr-16">
          <h3 className={`font-semibold text-lg truncate pr-2 ${isArchived ? 'text-gray-500' : 'text-gray-900'}`}>
            {project.name}
          </h3>
          <span className={`px-2 py-0.5 text-xs rounded-full flex-shrink-0 ${
            isArchived
              ? 'bg-gray-100 text-gray-500'
              : 'bg-green-100 text-green-700'
          }`}>
            {isArchived ? 'Archiviert' : 'Aktiv'}
          </span>
        </div>

        {project.description && (
          <p className="text-sm text-gray-500 mb-3 line-clamp-2">{project.description}</p>
        )}

        <div className="flex items-center gap-4 text-sm text-gray-500">
          <span className="font-mono">V{String(project.projectVersion).padStart(3, '0')}</span>
          <span className="text-gray-300">|</span>
          <div className="flex items-center gap-2 flex-1">
            <div className="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full transition-all ${
                  project.completionPercentage === 100 ? 'bg-green-500' : isArchived ? 'bg-gray-400' : 'bg-purple-600'
                }`}
                style={{ width: `${project.completionPercentage}%` }}
              />
            </div>
            <span className="font-medium text-gray-600">{project.completionPercentage}%</span>
          </div>
          {timeAgo && (
            <>
              <span className="text-gray-300">|</span>
              <span>{timeAgo}</span>
            </>
          )}
        </div>

        <div className="mt-2 text-xs text-gray-400">
          {project.customerType === 'new' ? 'Neukunde' : 'Bestandskunde'}
        </div>
      </button>
    </div>
  )
}

// =============================================================================
// MAIN COMPONENT
// =============================================================================

export function ProjectSelector() {
  const router = useRouter()
  const { listProjects, archiveProject, restoreProject, permanentlyDeleteProject } = useSDK()
  const [projects, setProjects] = useState<ProjectInfo[]>([])
  const [archivedProjects, setArchivedProjects] = useState<ProjectInfo[]>([])
  const [loading, setLoading] = useState(true)
  const [showCreateDialog, setShowCreateDialog] = useState(false)
  const [actionTarget, setActionTarget] = useState<ProjectInfo | null>(null)
  const [isProcessing, setIsProcessing] = useState(false)
  const [showArchived, setShowArchived] = useState(false)

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

  const loadProjects = async () => {
    setLoading(true)
    try {
      const result = await listProjects()
      const all = result.map(normalizeProject)
      setProjects(all.filter(p => p.status === 'active'))
      setArchivedProjects(all.filter(p => p.status === 'archived'))
    } catch (error) {
      console.error('Failed to load projects:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleProjectClick = (project: ProjectInfo) => {
    router.push(`/sdk?project=${project.id}`)
  }

  const handleProjectCreated = (project: ProjectInfo) => {
    router.push(`/sdk?project=${project.id}`)
  }

  const handleArchive = async () => {
    if (!actionTarget) return
    setIsProcessing(true)
    try {
      await archiveProject(actionTarget.id)
      // Move from active to archived
      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
      setArchivedProjects(prev => [...prev, { ...actionTarget, status: 'archived' as const }])
      setActionTarget(null)
    } catch (error) {
      console.error('Failed to archive project:', error)
    } finally {
      setIsProcessing(false)
    }
  }

  const handlePermanentDelete = async () => {
    if (!actionTarget) return
    setIsProcessing(true)
    try {
      await permanentlyDeleteProject(actionTarget.id)
      setProjects(prev => prev.filter(p => p.id !== actionTarget.id))
      setArchivedProjects(prev => prev.filter(p => p.id !== actionTarget.id))
      setActionTarget(null)
    } catch (error) {
      console.error('Failed to delete project:', error)
    } finally {
      setIsProcessing(false)
    }
  }

  const handleRestore = async (project: ProjectInfo) => {
    try {
      await restoreProject(project.id)
      setArchivedProjects(prev => prev.filter(p => p.id !== project.id))
      setProjects(prev => [...prev, { ...project, status: 'active' as const }])
    } catch (error) {
      console.error('Failed to restore project:', error)
    }
  }

  return (
    <div className="max-w-4xl mx-auto py-12 px-4">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Ihre Projekte</h1>
          <p className="mt-1 text-gray-500">
            Waehlen Sie ein Compliance-Projekt oder erstellen Sie ein neues.
          </p>
        </div>
        <button
          onClick={() => setShowCreateDialog(true)}
          className="flex items-center gap-2 px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium text-sm"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Neues Projekt
        </button>
      </div>

      {/* Loading */}
      {loading && (
        <div className="flex items-center justify-center py-16">
          <div className="w-8 h-8 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin" />
        </div>
      )}

      {/* Empty State */}
      {!loading && projects.length === 0 && archivedProjects.length === 0 && (
        <div className="text-center py-16">
          <div className="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
            <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
          <h2 className="text-lg font-semibold text-gray-900">Noch keine Projekte</h2>
          <p className="mt-2 text-gray-500 max-w-md mx-auto">
            Erstellen Sie Ihr erstes Compliance-Projekt, um mit der DSGVO- und AI-Act-Konformitaet zu beginnen.
          </p>
          <button
            onClick={() => setShowCreateDialog(true)}
            className="mt-6 inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Erstes Projekt erstellen
          </button>
        </div>
      )}

      {/* Active Projects */}
      {!loading && projects.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {projects.map(project => (
            <ProjectCard
              key={project.id}
              project={project}
              onClick={() => handleProjectClick(project)}
              onDelete={() => setActionTarget(project)}
            />
          ))}
        </div>
      )}

      {/* Archived Projects Section */}
      {!loading && archivedProjects.length > 0 && (
        <div className="mt-8">
          <button
            onClick={() => setShowArchived(!showArchived)}
            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-4"
          >
            <svg
              className={`w-4 h-4 transition-transform ${showArchived ? 'rotate-90' : ''}`}
              fill="none" stroke="currentColor" viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
            </svg>
            Archivierte Projekte ({archivedProjects.length})
          </button>

          {showArchived && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {archivedProjects.map(project => (
                <ProjectCard
                  key={project.id}
                  project={project}
                  onClick={() => handleProjectClick(project)}
                  onRestore={() => handleRestore(project)}
                  onDelete={() => setActionTarget(project)}
                />
              ))}
            </div>
          )}
        </div>
      )}

      {/* Create Dialog */}
      <CreateProjectDialog
        open={showCreateDialog}
        onClose={() => setShowCreateDialog(false)}
        onCreated={handleProjectCreated}
        existingProjects={projects}
      />

      {/* Action Dialog (Archive / Delete) */}
      {actionTarget && (
        <ProjectActionDialog
          project={actionTarget}
          onArchive={handleArchive}
          onPermanentDelete={handlePermanentDelete}
          onCancel={() => setActionTarget(null)}
          isProcessing={isProcessing}
        />
      )}
    </div>
  )
}