import { useEffect, useState } from 'react';

import type { GameSystemListItem } from '../../shared/ipc/contracts';

export type { GameSystemListItem };

type Props = {
  open: boolean;
  onClose: () => void;
  labels: {
    title: string;
    import: string;
    preview: string;
    remove: string;
    empty: string;
    close: string;
  };
  listSystems: () => Promise<GameSystemListItem[]>;
  importSystem: () => Promise<GameSystemListItem | null>;
  deleteSystem: (id: string) => Promise<void>;
  previewSystem: (id: string) => Promise<void>;
};

export function GameSystemsModal({
  open,
  onClose,
  labels,
  listSystems,
  importSystem,
  deleteSystem,
  previewSystem,
}: Props) {
  const [items, setItems] = useState<GameSystemListItem[]>([]);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (!open) return;
    void (async () => {
      setItems(await listSystems());
    })();
  }, [open, listSystems]);

  if (!open) return null;

  return (
    <div
      data-testid="game-systems-modal"
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(0,0,0,0.55)',
        display: 'grid',
        placeItems: 'center',
        zIndex: 10000,
      }}
    >
      <div
        style={{
          width: 560,
          maxHeight: '80vh',
          overflow: 'auto',
          background: 'rgba(10,10,14,0.98)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 12,
          padding: 16,
          color: 'rgba(255,255,255,0.92)',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <strong>{labels.title}</strong>
          <button type="button" data-testid="game-systems-close" onClick={onClose}>
            {labels.close}
          </button>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <button
            type="button"
            data-testid="game-systems-import"
            disabled={busy}
            onClick={async () => {
              setBusy(true);
              try {
                await importSystem();
                setItems(await listSystems());
              } finally {
                setBusy(false);
              }
            }}
          >
            {labels.import}
          </button>
        </div>
        {items.length === 0 ? (
          <div style={{ opacity: 0.6 }}>{labels.empty}</div>
        ) : (
          items.map((s) => (
            <div
              key={s.id}
              data-testid={`game-system-${s.id}`}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                gap: 8,
                padding: '10px 0',
                borderBottom: '1px solid rgba(255,255,255,0.08)',
              }}
            >
              <div>
                <div>{s.name}</div>
                <div style={{ opacity: 0.55, fontSize: 12 }}>
                  {s.id} · r{s.revision}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button type="button" onClick={() => void previewSystem(s.id)}>
                  {labels.preview}
                </button>
                <button
                  type="button"
                  onClick={async () => {
                    await deleteSystem(s.id);
                    setItems(await listSystems());
                  }}
                >
                  {labels.remove}
                </button>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}