'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import type { Version } from '@/lib/services/versionControl'

interface VersionComparisonProps {
  version1: Version
  version2: Version
}

export function VersionComparison({ version1, version2 }: VersionComparisonProps) {
  const comparison = {
    added: [] as Version['changes'],
    removed: [] as Version['changes'],
    modified: [] as Version['changes'],
  }

  const v1Data = version1.data as any
  const v2Data = version2.data as any
  const allKeys = new Set([...Object.keys(v1Data), ...Object.keys(v2Data)])

  for (const key of allKeys) {
    if (key === 'id' || key === 'lastUpdated') continue

    const v1Val = v1Data[key]
    const v2Val = v2Data[key]

    if (v1Val === undefined && v2Val !== undefined) {
      comparison.added.push({ field: key, before: undefined, after: v2Val })
    } else if (v1Val !== undefined && v2Val === undefined) {
      comparison.removed.push({ field: key, before: v1Val, after: undefined })
    } else if (JSON.stringify(v1Val) !== JSON.stringify(v2Val)) {
      comparison.modified.push({ field: key, before: v1Val, after: v2Val })
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Version Comparison</CardTitle>
        <CardDescription>
          Comparing v{version1.version} with v{version2.version}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {comparison.added.length > 0 && (
          <div>
            <h3 className="font-semibold text-green-400 mb-2">Added Fields</h3>
            <div className="space-y-2">
              {comparison.added.map((change, idx) => (
                <div key={idx} className="p-2 bg-green-500/10 border border-green-500/20 rounded">
                  <div className="font-medium">{change.field}</div>
                  <div className="text-sm text-studio-medium">
                    {JSON.stringify(change.after)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {comparison.removed.length > 0 && (
          <div>
            <h3 className="font-semibold text-red-400 mb-2">Removed Fields</h3>
            <div className="space-y-2">
              {comparison.removed.map((change, idx) => (
                <div key={idx} className="p-2 bg-red-500/10 border border-red-500/20 rounded">
                  <div className="font-medium">{change.field}</div>
                  <div className="text-sm text-studio-medium">
                    {JSON.stringify(change.before)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {comparison.modified.length > 0 && (
          <div>
            <h3 className="font-semibold text-yellow-400 mb-2">Modified Fields</h3>
            <div className="space-y-2">
              {comparison.modified.map((change, idx) => (
                <div key={idx} className="p-2 bg-yellow-500/10 border border-yellow-500/20 rounded">
                  <div className="font-medium">{change.field}</div>
                  <div className="text-sm space-y-1">
                    <div className="text-red-400">
                      <span className="font-medium">Before:</span>{' '}
                      {JSON.stringify(change.before)}
                    </div>
                    <div className="text-green-400">
                      <span className="font-medium">After:</span>{' '}
                      {JSON.stringify(change.after)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {comparison.added.length === 0 &&
          comparison.removed.length === 0 &&
          comparison.modified.length === 0 && (
            <div className="text-center text-studio-medium py-8">
              No differences found between versions
            </div>
          )}
      </CardContent>
    </Card>
  )
}

