import { Eye, RotateCcw } from 'lucide-react';

export function SnapshotTable({ onInspect, onRestore, snapshots }) {
  const dataSnapshots = snapshots.filter((snapshot) => !(snapshot.tags || []).includes('metadata'));
  return (
    <section className="overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/70">
      <div className="border-b border-zinc-800 px-4 py-3">
        <h2 className="text-sm font-semibold">Snapshots</h2>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full min-w-[680px] text-left text-sm">
          <thead className="border-b border-zinc-800 text-xs uppercase tracking-wide text-zinc-500">
            <tr>
              <th className="px-4 py-3 font-medium">ID</th>
              <th className="px-4 py-3 font-medium">Date & Time</th>
              <th className="px-4 py-3 font-medium">Tags</th>
              <th className="px-4 py-3 text-right font-medium">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-zinc-800">
            {dataSnapshots.map((snapshot) => (
              <tr className="hover:bg-zinc-900" key={snapshot.id}>
                <td className="px-4 py-3 font-mono text-zinc-100">{snapshot.id.slice(0, 8)}</td>
                <td className="px-4 py-3 text-zinc-300">{formatTime(snapshot.time)}</td>
                <td className="px-4 py-3 text-zinc-400">{(snapshot.tags || []).join(', ') || '-'}</td>
                <td className="px-4 py-3 text-right">
                  <div className="inline-flex items-center gap-2">
                    <button
                      className="inline-flex h-8 items-center gap-2 rounded-md border border-zinc-700 px-2.5 text-xs text-zinc-100 hover:border-cyan-500 hover:text-cyan-200"
                      onClick={() => onInspect(snapshot)}
                      type="button"
                    >
                      <Eye className="h-4 w-4" />
                      View
                    </button>
                    <button
                      className="inline-flex h-8 items-center gap-2 rounded-md border border-red-900 px-2.5 text-xs text-red-300 hover:border-red-600 hover:text-red-200"
                      onClick={() => onRestore(snapshot)}
                      type="button"
                    >
                      <RotateCcw className="h-4 w-4" />
                      Restore Disk
                    </button>
                  </div>
                </td>
              </tr>
            ))}
            {!dataSnapshots.length ? (
              <tr>
                <td className="px-4 py-8 text-center text-zinc-500" colSpan="4">
                  No snapshots found.
                </td>
              </tr>
            ) : null}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function formatTime(value) {
  if (!value) return '-';
  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'medium' }).format(new Date(value));
}
