import { useState } from 'react';
import { Badge } from '@cameleer/design-system';
import type { Deployment, AppVersion } from '../../../api/queries/admin/apps';
import { timeAgo } from '../../../utils/format-utils';
import styles from './AppDeploymentPage.module.css';

const FALLBACK_CAP = 10;

interface CheckpointsTableProps {
  deployments: Deployment[];
  versions: AppVersion[];
  currentDeploymentId: string | null;
  jarRetentionCount: number | null;
  onSelect: (deploymentId: string) => void;
}

export function CheckpointsTable({
  deployments,
  versions,
  currentDeploymentId,
  jarRetentionCount,
  onSelect,
}: CheckpointsTableProps) {
  const [expanded, setExpanded] = useState(false);
  const [open, setOpen] = useState(false);
  const versionMap = new Map(versions.map((v) => [v.id, v]));

  const checkpoints = deployments
    .filter((d) => d.deployedConfigSnapshot && d.id !== currentDeploymentId)
    .sort((a, b) => (b.deployedAt ?? '').localeCompare(a.deployedAt ?? ''));

  if (checkpoints.length === 0) {
    return null;
  }

  const cap = jarRetentionCount && jarRetentionCount > 0 ? jarRetentionCount : FALLBACK_CAP;
  const visible = expanded ? checkpoints : checkpoints.slice(0, cap);
  const hidden = checkpoints.length - visible.length;

  return (
    <>
      <span className={styles.configLabel}>Checkpoints</span>
      <div className={styles.checkpointsTriggerCell}>
        <button
          type="button"
          className={styles.checkpointsTrigger}
          onClick={() => setOpen((v) => !v)}
          aria-expanded={open}
        >
          <span className={styles.checkpointsChevron}>{open ? '\u25BE' : '\u25B8'}</span>
          {open ? 'Collapse' : 'Expand'} ({checkpoints.length})
        </button>
      </div>
      {open && (
        <div className={styles.checkpointsTableFullRow}>
          <div className={styles.checkpointsTable}>
            <table>
              <thead>
                <tr>
                  <th>Version</th>
                  <th>JAR</th>
                  <th>Deployed by</th>
                  <th>Deployed</th>
                  <th>Strategy</th>
                  <th>Outcome</th>
                  <th aria-label="open"></th>
                </tr>
              </thead>
              <tbody>
                {visible.map((d) => {
                  const v = versionMap.get(d.appVersionId);
                  const archived = !v;
                  const strategyLabel =
                    d.deploymentStrategy === 'BLUE_GREEN' ? 'blue/green' : 'rolling';
                  return (
                    <tr
                      key={d.id}
                      className={archived ? styles.checkpointArchived : undefined}
                      onClick={() => onSelect(d.id)}
                    >
                      <td>
                        <Badge label={v ? `v${v.version}` : '?'} color="auto" />
                      </td>
                      <td className={styles.jarCell}>
                        {v ? (
                          <span className={styles.jarName}>{v.jarFilename}</span>
                        ) : (
                          <>
                            <span className={styles.jarStrike}>JAR pruned</span>
                            <div className={styles.archivedHint}>archived — JAR pruned</div>
                          </>
                        )}
                      </td>
                      <td>
                        {d.createdBy ?? <span className={styles.muted}>—</span>}
                      </td>
                      <td>
                        {d.deployedAt && timeAgo(d.deployedAt)}
                        <div className={styles.isoSubline}>
                          {d.deployedAt && new Date(d.deployedAt).toLocaleString()}
                        </div>
                      </td>
                      <td>
                        <span className={styles.strategyPill}>{strategyLabel}</span>
                      </td>
                      <td>
                        <span
                          className={`${styles.outcomePill} ${styles[`outcome-${d.status}` as keyof typeof styles] || ''}`}
                        >
                          {d.status}
                        </span>
                      </td>
                      <td className={styles.chevron}>›</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {hidden > 0 && !expanded && (
              <button
                type="button"
                className={styles.showOlderBtn}
                onClick={() => setExpanded(true)}
              >
                Show older ({hidden}) — archived, postmortem only
              </button>
            )}
          </div>
        </div>
      )}
    </>
  );
}
