'use client'

import React from 'react'
import { DSRRequest } from '@/lib/sdk/dsr/types'
import {
  DSRErasureChecklistComponent,
  DSRDataExportComponent
} from '@/components/sdk/dsr'

export function DSRTypeSpecificTab({
  request,
  setRequest,
  exceptionChecks,
  onExceptionCheckChange,
}: {
  request: DSRRequest
  setRequest: (r: DSRRequest) => void
  exceptionChecks: any[]
  onExceptionCheckChange: (checkId: string, applies: boolean, notes?: string) => void
}) {
  return (
    <div>
      {/* Art. 17 - Erasure */}
      {request.type === 'erasure' && (
        <div className="space-y-4">
          <DSRErasureChecklistComponent
            checklist={request.erasureChecklist}
            onChange={(checklist) => setRequest({ ...request, erasureChecklist: checklist })}
          />

          {/* Art. 17(3) Exception Checks from Backend */}
          {exceptionChecks.length > 0 && (
            <div className="mt-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-3">Art. 17(3) Ausnahmepruefung</h3>
              <p className="text-sm text-gray-500 mb-4">
                Pruefen Sie, ob eine der gesetzlichen Ausnahmen zur Loeschpflicht greift.
              </p>
              <div className="space-y-3">
                {exceptionChecks.map((check) => (
                  <div key={check.id} className="bg-gray-50 rounded-xl p-4 border border-gray-200">
                    <div className="flex items-start gap-3">
                      <input
                        type="checkbox"
                        checked={check.applies || false}
                        onChange={(e) => onExceptionCheckChange(check.id, e.target.checked, check.notes)}
                        className="mt-1 h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                      />
                      <div className="flex-1">
                        <div className="font-medium text-gray-900 text-sm">
                          {check.article}: {check.label}
                        </div>
                        <div className="text-xs text-gray-500 mt-0.5">{check.description}</div>
                        {check.checked_by && (
                          <div className="text-xs text-gray-400 mt-1">
                            Geprueft von {check.checked_by} am{' '}
                            {check.checked_at ? new Date(check.checked_at).toLocaleDateString('de-DE') : '-'}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Art. 15/20 - Data Export */}
      {(request.type === 'access' || request.type === 'portability') && (
        <DSRDataExportComponent
          dsrId={request.id}
          dsrType={request.type}
          existingExport={request.dataExport}
          onGenerate={async (format) => {
            // Mock generation
            setRequest({
              ...request,
              dataExport: {
                format,
                generatedAt: new Date().toISOString(),
                generatedBy: 'Current User',
                fileName: `datenexport_${request.referenceNumber}.${format}`,
                fileSize: 125000,
                includesThirdPartyData: true
              }
            })
          }}
        />
      )}

      {/* Art. 16 - Rectification */}
      {request.type === 'rectification' && request.rectificationDetails && (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-900">Zu korrigierende Daten</h3>
          <div className="space-y-3">
            {request.rectificationDetails.fieldsToCorrect.map((field, idx) => (
              <div key={idx} className="bg-gray-50 rounded-xl p-4">
                <div className="font-medium text-gray-900 mb-2">{field.field}</div>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <div className="text-gray-500 mb-1">Aktueller Wert</div>
                    <div className="text-red-600 line-through">{field.currentValue}</div>
                  </div>
                  <div>
                    <div className="text-gray-500 mb-1">Angeforderter Wert</div>
                    <div className="text-green-600">{field.requestedValue}</div>
                  </div>
                </div>
                {field.corrected && (
                  <div className="mt-2 text-xs text-green-600">
                    Korrigiert am {new Date(field.correctedAt!).toLocaleDateString('de-DE')}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Art. 21 - Objection */}
      {request.type === 'objection' && request.objectionDetails && (
        <div className="space-y-4">
          <h3 className="text-lg font-semibold text-gray-900">Widerspruchsdetails</h3>
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gray-50 rounded-xl p-4">
              <div className="text-sm text-gray-500 mb-1">Verarbeitungszweck</div>
              <div className="font-medium">{request.objectionDetails.processingPurpose}</div>
            </div>
            <div className="bg-gray-50 rounded-xl p-4">
              <div className="text-sm text-gray-500 mb-1">Rechtsgrundlage</div>
              <div className="font-medium">{request.objectionDetails.legalBasis}</div>
            </div>
          </div>
          <div className="bg-gray-50 rounded-xl p-4">
            <div className="text-sm text-gray-500 mb-1">Widerspruchsgruende</div>
            <div>{request.objectionDetails.objectionGrounds}</div>
          </div>
          {request.objectionDetails.decision !== 'pending' && (
            <div className={`
              rounded-xl p-4 border
              ${request.objectionDetails.decision === 'accepted'
                ? 'bg-green-50 border-green-200'
                : 'bg-red-50 border-red-200'
              }
            `}>
              <div className={`font-medium ${
                request.objectionDetails.decision === 'accepted' ? 'text-green-800' : 'text-red-800'
              }`}>
                Widerspruch {request.objectionDetails.decision === 'accepted' ? 'angenommen' : 'abgelehnt'}
              </div>
              {request.objectionDetails.decisionReason && (
                <div className={`text-sm mt-1 ${
                  request.objectionDetails.decision === 'accepted' ? 'text-green-700' : 'text-red-700'
                }`}>
                  {request.objectionDetails.decisionReason}
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Default for restriction */}
      {request.type === 'restriction' && (
        <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" 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>
              <div className="font-medium text-blue-800">Einschraenkung der Verarbeitung</div>
              <p className="text-sm text-blue-700 mt-1">
                Markieren Sie die betroffenen Daten im System als eingeschraenkt.
                Die Daten duerfen nur noch gespeichert, aber nicht mehr verarbeitet werden.
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
