// SPDX-License-Identifier: GPL-3.0-or-later

import { Clock, HardDrive, ChevronRight } from 'lucide-react';
import { formatBytes, formatRelativeTime, formatDateTime } from '../lib/utils';
import type { Snapshot } from '../lib/api';

interface SnapshotCardProps {
  snapshot: Snapshot;
  onClick?: () => void;
  selected?: boolean;
  showDetails?: boolean;
}

export default function SnapshotCard({
  snapshot,
  onClick,
  selected = false,
  showDetails = false,
}: SnapshotCardProps) {
  return (
    <div
      onClick={onClick}
      className={`
        p-4 rounded-lg border transition-all
        ${onClick ? 'cursor-pointer hover:shadow-md' : ''}
        ${
          selected
            ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
            : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800'
        }
      `}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          {/* Snapshot ID */}
          <div className="flex items-center space-x-2">
            <span className="font-mono text-sm font-medium text-slate-900 dark:text-white">
              {snapshot.id.substring(0, 8)}
            </span>
          </div>

          {/* Time */}
          <div className="flex items-center mt-1 text-sm text-slate-500 dark:text-slate-400">
            <Clock className="w-3.5 h-3.5 mr-1.5" />
            <span title={formatDateTime(snapshot.time)}>
              {formatRelativeTime(snapshot.time)}
            </span>
          </div>

          {/* Paths */}
          {showDetails && snapshot.paths.length > 0 && (
            <div className="mt-2 text-sm text-slate-600 dark:text-slate-400">
              <p className="truncate">{snapshot.paths[0]}</p>
              {snapshot.paths.length > 1 && (
                <p className="text-xs text-slate-400">
                  +{snapshot.paths.length - 1} more path(s)
                </p>
              )}
            </div>
          )}

          {/* Tags */}
          {snapshot.tags && Object.keys(snapshot.tags).length > 0 && (
            <div className="flex flex-wrap gap-1 mt-2">
              {Object.entries(snapshot.tags).slice(0, 3).map(([key, value]) => (
                <span
                  key={key}
                  className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400"
                >
                  {key}: {value}
                </span>
              ))}
              {Object.keys(snapshot.tags).length > 3 && (
                <span className="text-xs text-slate-400">
                  +{Object.keys(snapshot.tags).length - 3}
                </span>
              )}
            </div>
          )}
        </div>

        {/* Right side */}
        <div className="flex items-center space-x-3 ml-4">
          {/* Size */}
          {snapshot.size !== undefined && (
            <div className="text-right">
              <div className="flex items-center text-sm text-slate-600 dark:text-slate-400">
                <HardDrive className="w-3.5 h-3.5 mr-1" />
                {formatBytes(snapshot.size)}
              </div>
            </div>
          )}

          {/* Arrow if clickable */}
          {onClick && (
            <ChevronRight className="w-5 h-5 text-slate-400" />
          )}
        </div>
      </div>
    </div>
  );
}
