'use client'

import React, { useState } from 'react'
import {
  DSRErasureChecklist,
  DSRErasureChecklistItem,
  ERASURE_EXCEPTIONS
} from '@/lib/sdk/dsr/types'

interface DSRErasureChecklistProps {
  checklist?: DSRErasureChecklist
  onChange?: (checklist: DSRErasureChecklist) => void
  readOnly?: boolean
}

export function DSRErasureChecklistComponent({
  checklist,
  onChange,
  readOnly = false
}: DSRErasureChecklistProps) {
  const [localChecklist, setLocalChecklist] = useState<DSRErasureChecklist>(() => {
    if (checklist) return checklist
    return {
      items: ERASURE_EXCEPTIONS.map(exc => ({
        ...exc,
        checked: false,
        applies: false
      })),
      canProceedWithErasure: true
    }
  })

  const handleItemChange = (
    itemId: string,
    field: 'checked' | 'applies' | 'notes',
    value: boolean | string
  ) => {
    const updatedItems = localChecklist.items.map(item => {
      if (item.id !== itemId) return item
      return { ...item, [field]: value }
    })

    // Calculate if erasure can proceed (no exceptions apply)
    const canProceedWithErasure = !updatedItems.some(item => item.checked && item.applies)

    const updatedChecklist: DSRErasureChecklist = {
      ...localChecklist,
      items: updatedItems,
      canProceedWithErasure
    }

    setLocalChecklist(updatedChecklist)
    onChange?.(updatedChecklist)
  }

  const appliedExceptions = localChecklist.items.filter(item => item.checked && item.applies)
  const allChecked = localChecklist.items.every(item => item.checked)

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-gray-900">
            Art. 17(3) Ausnahmen-Pruefung
          </h3>
          <p className="text-sm text-gray-500 mt-1">
            Pruefen Sie, ob eine der Ausnahmen zur Loeschung zutrifft
          </p>
        </div>
        {/* Status Badge */}
        <div className={`
          px-3 py-1.5 rounded-lg text-sm font-medium
          ${localChecklist.canProceedWithErasure
            ? 'bg-green-100 text-green-700 border border-green-200'
            : 'bg-red-100 text-red-700 border border-red-200'
          }
        `}>
          {localChecklist.canProceedWithErasure
            ? 'Loeschung moeglich'
            : `${appliedExceptions.length} Ausnahme(n)`
          }
        </div>
      </div>

      {/* Info Box */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div className="text-sm text-blue-700">
            <p className="font-medium">Hinweis</p>
            <p className="mt-1">
              Nach Art. 17(3) DSGVO bestehen Ausnahmen vom Loeschungsanspruch.
              Pruefen Sie jeden Punkt und dokumentieren Sie, ob eine Ausnahme greift.
            </p>
          </div>
        </div>
      </div>

      {/* Checklist Items */}
      <div className="space-y-3">
        {localChecklist.items.map((item, index) => (
          <ChecklistItem
            key={item.id}
            item={item}
            index={index}
            readOnly={readOnly}
            onChange={(field, value) => handleItemChange(item.id, field, value)}
          />
        ))}
      </div>

      {/* Summary */}
      {allChecked && (
        <div className={`
          rounded-xl p-4 border
          ${localChecklist.canProceedWithErasure
            ? 'bg-green-50 border-green-200'
            : 'bg-red-50 border-red-200'
          }
        `}>
          <div className="flex items-start gap-3">
            <div className={`
              w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
              ${localChecklist.canProceedWithErasure ? 'bg-green-100' : 'bg-red-100'}
            `}>
              {localChecklist.canProceedWithErasure ? (
                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              ) : (
                <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="M6 18L18 6M6 6l12 12" />
                </svg>
              )}
            </div>
            <div>
              <div className={`font-medium ${localChecklist.canProceedWithErasure ? 'text-green-800' : 'text-red-800'}`}>
                {localChecklist.canProceedWithErasure
                  ? 'Alle Ausnahmen geprueft - Loeschung kann durchgefuehrt werden'
                  : 'Ausnahme(n) greifen - Loeschung nicht oder nur teilweise moeglich'
                }
              </div>
              {!localChecklist.canProceedWithErasure && (
                <ul className="mt-2 space-y-1">
                  {appliedExceptions.map(exc => (
                    <li key={exc.id} className="text-sm text-red-700">
                      - {exc.article}: {exc.label}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Progress Indicator */}
      {!allChecked && (
        <div className="text-sm text-gray-500 text-center">
          {localChecklist.items.filter(i => i.checked).length} von {localChecklist.items.length} Ausnahmen geprueft
        </div>
      )}
    </div>
  )
}

// Individual Checklist Item Component
function ChecklistItem({
  item,
  index,
  readOnly,
  onChange
}: {
  item: DSRErasureChecklistItem
  index: number
  readOnly: boolean
  onChange: (field: 'checked' | 'applies' | 'notes', value: boolean | string) => void
}) {
  const [expanded, setExpanded] = useState(false)

  return (
    <div className={`
      rounded-xl border transition-all
      ${item.checked
        ? item.applies
          ? 'border-red-200 bg-red-50'
          : 'border-green-200 bg-green-50'
        : 'border-gray-200 bg-white'
      }
    `}>
      {/* Main Row */}
      <div className="p-4">
        <div className="flex items-start gap-4">
          {/* Checkbox */}
          <label className="flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={item.checked}
              onChange={(e) => onChange('checked', e.target.checked)}
              disabled={readOnly}
              className="w-5 h-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500 disabled:opacity-50"
            />
          </label>

          {/* Content */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <span className="text-xs font-mono text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
                {item.article}
              </span>
              <span className="font-medium text-gray-900">{item.label}</span>
            </div>
            <p className="text-sm text-gray-600">{item.description}</p>
          </div>

          {/* Toggle Expand */}
          <button
            onClick={() => setExpanded(!expanded)}
            className="p-1 text-gray-400 hover:text-gray-600 rounded"
          >
            <svg
              className={`w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
        </div>

        {/* Applies Toggle - Show when checked */}
        {item.checked && (
          <div className="mt-3 ml-9 flex items-center gap-4">
            <span className="text-sm text-gray-600">Trifft diese Ausnahme zu?</span>
            <div className="flex items-center gap-2">
              <button
                onClick={() => onChange('applies', false)}
                disabled={readOnly}
                className={`
                  px-3 py-1 text-sm rounded-lg transition-colors
                  ${!item.applies
                    ? 'bg-green-600 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }
                  ${readOnly ? 'opacity-50 cursor-not-allowed' : ''}
                `}
              >
                Nein
              </button>
              <button
                onClick={() => onChange('applies', true)}
                disabled={readOnly}
                className={`
                  px-3 py-1 text-sm rounded-lg transition-colors
                  ${item.applies
                    ? 'bg-red-600 text-white'
                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }
                  ${readOnly ? 'opacity-50 cursor-not-allowed' : ''}
                `}
              >
                Ja
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Expanded Notes Section */}
      {expanded && (
        <div className="px-4 pb-4 pt-0 border-t border-gray-100">
          <div className="ml-9 mt-3">
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Notizen / Begruendung
            </label>
            <textarea
              value={item.notes || ''}
              onChange={(e) => onChange('notes', e.target.value)}
              disabled={readOnly}
              placeholder="Dokumentieren Sie Ihre Pruefung..."
              rows={3}
              className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none disabled:bg-gray-50 disabled:text-gray-500"
            />
          </div>
        </div>
      )}
    </div>
  )
}