'use client';

/**
 * Conflict Resolution UI Component
 * 
 * Handle sync conflicts gracefully with user prompts
 */

import { useState } from 'react';
import { SyncConflict } from '../../hooks/use-offline-sync';
import {
  AlertTriangle,
  Cloud,
  Smartphone,
  ArrowRight,
  Check,
  X,
  Merge,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';

interface ConflictResolutionProps {
  conflict: SyncConflict;
  onResolve: (resolution: 'keep_local' | 'keep_server' | 'merge', mergedData?: any) => void;
  onDismiss: () => void;
}

export function ConflictResolutionModal({ conflict, onResolve, onDismiss }: ConflictResolutionProps) {
  const [showDetails, setShowDetails] = useState(false);
  const [isResolving, setIsResolving] = useState(false);

  const localData = conflict.queuedDelivery.data;
  const serverData = conflict.serverData;

  const handleResolve = async (resolution: 'keep_local' | 'keep_server' | 'merge') => {
    setIsResolving(true);
    await onResolve(resolution);
    setIsResolving(false);
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden">
        {/* Header */}
        <div className="bg-amber-50 p-4 border-b border-amber-100">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100">
              <AlertTriangle className="h-5 w-5 text-amber-600" />
            </div>
            <div>
              <h3 className="font-semibold text-slate-900">Sync Conflict</h3>
              <p className="text-sm text-slate-600">This delivery already exists on the server</p>
            </div>
          </div>
        </div>

        {/* Conflict Details */}
        <div className="p-4 space-y-4">
          {/* Visual comparison */}
          <div className="grid grid-cols-3 gap-2 items-center">
            {/* Local */}
            <div className="rounded-xl bg-blue-50 p-3 text-center">
              <Smartphone className="h-5 w-5 mx-auto text-blue-600 mb-1" />
              <div className="text-xs text-slate-500">Your device</div>
              <div className="mt-1 font-semibold text-blue-700">
                {localData.actual_quantity} units
              </div>
              <div className="text-xs text-slate-500">
                {formatDate(localData.delivery_date)}
              </div>
            </div>

            {/* Arrow */}
            <div className="flex items-center justify-center">
              <ArrowRight className="h-5 w-5 text-slate-400" />
            </div>

            {/* Server */}
            <div className="rounded-xl bg-emerald-50 p-3 text-center">
              <Cloud className="h-5 w-5 mx-auto text-emerald-600 mb-1" />
              <div className="text-xs text-slate-500">Server</div>
              <div className="mt-1 font-semibold text-emerald-700">
                {serverData?.actual_quantity || '?'} units
              </div>
              <div className="text-xs text-slate-500">
                {serverData?.delivery_date ? formatDate(serverData.delivery_date) : 'Unknown'}
              </div>
            </div>
          </div>

          {/* Expandable details */}
          <button
            onClick={() => setShowDetails(!showDetails)}
            className="flex items-center justify-center gap-1 w-full py-2 text-sm text-slate-500 hover:text-slate-700"
          >
            {showDetails ? 'Hide' : 'Show'} details
            {showDetails ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          </button>

          {showDetails && (
            <div className="space-y-2 text-sm">
              <div className="grid grid-cols-2 gap-2">
                <div className="rounded-lg bg-slate-50 p-2">
                  <div className="text-xs text-slate-500">Local timestamp</div>
                  <div className="font-mono text-xs">
                    {new Date(conflict.queuedDelivery.timestamp).toLocaleString()}
                  </div>
                </div>
                <div className="rounded-lg bg-slate-50 p-2">
                  <div className="text-xs text-slate-500">Server updated</div>
                  <div className="font-mono text-xs">
                    {serverData?.updated_at ? new Date(serverData.updated_at).toLocaleString() : 'Unknown'}
                  </div>
                </div>
              </div>
              {localData.notes && (
                <div className="rounded-lg bg-slate-50 p-2">
                  <div className="text-xs text-slate-500">Your notes</div>
                  <div className="text-xs">{localData.notes}</div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Actions */}
        <div className="border-t border-slate-100 p-4 space-y-2">
          <button
            onClick={() => handleResolve('keep_local')}
            disabled={isResolving}
            className="flex items-center justify-center gap-2 w-full rounded-xl bg-blue-500 py-3 text-sm font-medium text-white hover:bg-blue-600 disabled:opacity-50 transition-colors"
          >
            <Smartphone className="h-4 w-4" />
            Keep my version
          </button>
          <button
            onClick={() => handleResolve('keep_server')}
            disabled={isResolving}
            className="flex items-center justify-center gap-2 w-full rounded-xl bg-emerald-500 py-3 text-sm font-medium text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
          >
            <Cloud className="h-4 w-4" />
            Keep server version
          </button>
          <button
            onClick={onDismiss}
            disabled={isResolving}
            className="flex items-center justify-center gap-2 w-full rounded-xl border border-slate-200 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 transition-colors"
          >
            Decide later
          </button>
        </div>
      </div>
    </div>
  );
}

// Compact conflict badge for list items
export function ConflictBadge({ onClick }: { onClick?: () => void }) {
  return (
    <button
      onClick={onClick}
      className="flex items-center gap-1 rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 hover:bg-amber-200 transition-colors"
    >
      <AlertTriangle className="h-3 w-3" />
      Conflict
    </button>
  );
}

// Offline queue status panel
export function OfflineQueuePanel({
  pendingCount,
  failedCount,
  conflictCount,
  isSyncing,
  onSyncAll,
  onViewConflicts,
}: {
  pendingCount: number;
  failedCount: number;
  conflictCount: number;
  isSyncing: boolean;
  onSyncAll: () => void;
  onViewConflicts: () => void;
}) {
  if (pendingCount === 0 && failedCount === 0 && conflictCount === 0) {
    return null;
  }

  return (
    <div className="rounded-xl border border-slate-200 bg-white p-4">
      <div className="flex items-center justify-between mb-3">
        <h3 className="font-semibold text-slate-900">Sync Status</h3>
        {isSyncing && (
          <span className="text-xs text-blue-600 animate-pulse">Syncing...</span>
        )}
      </div>

      <div className="space-y-2">
        {pendingCount > 0 && (
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-600">Pending</span>
            <span className="font-medium text-blue-600">{pendingCount}</span>
          </div>
        )}
        {failedCount > 0 && (
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-600">Failed</span>
            <span className="font-medium text-red-600">{failedCount}</span>
          </div>
        )}
        {conflictCount > 0 && (
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-600">Conflicts</span>
            <button
              onClick={onViewConflicts}
              className="font-medium text-amber-600 hover:underline"
            >
              {conflictCount} - Resolve
            </button>
          </div>
        )}
      </div>

      {(pendingCount > 0 || failedCount > 0) && (
        <button
          onClick={onSyncAll}
          disabled={isSyncing}
          className="mt-3 w-full rounded-lg bg-emerald-500 py-2 text-sm font-medium text-white hover:bg-emerald-600 disabled:opacity-50 transition-colors"
        >
          {isSyncing ? 'Syncing...' : 'Sync Now'}
        </button>
      )}
    </div>
  );
}