'use client';

import React from 'react';
import { DrilldownStat } from './DrilldownStat';
import styles from './page.module.css';

export interface DealerIndexingRow {
  dealerId: string;
  type: 'subdomain' | 'customDomain';
  domain: string | null;
  indexStatus: string | null;
  submittedAt: string | null;
  inspectedAt: string | null;
}

export interface DealerIndexingData {
  total: number;
  indexed: number;
  settling: number;
  needsAttention: number;
  neverInspected: number;
  lastSweepAt: string | null;
  needsAttentionList: DealerIndexingRow[];
  neverInspectedList: Array<Pick<DealerIndexingRow, 'dealerId' | 'type' | 'domain'>>;
}

interface Props {
  data: DealerIndexingData;
  onSelectDealer: (id: string) => void;
  propertyHeadroom?: { ownedEstimate: number; cap: number };
}

function ageDays(iso: string | null): string {
  if (!iso) return '—';
  return `${Math.floor((Date.now() - Date.parse(iso)) / 86_400_000)}d`;
}

function relative(iso: string | null): string {
  if (!iso) return 'never';
  const h = Math.floor((Date.now() - Date.parse(iso)) / 3_600_000);
  if (h < 1) return 'just now';
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

function TypePill({ type }: { type: 'subdomain' | 'customDomain' }) {
  return (
    <span className={styles.typePill}>
      {type === 'customDomain' ? 'Custom Domain' : 'Subdomain'}
    </span>
  );
}

function BucketList({
  rows,
  onSelectDealer,
  empty,
}: {
  rows: DealerIndexingRow[];
  onSelectDealer: (id: string) => void;
  empty: string;
}) {
  if (rows.length === 0) return <p className={styles.emptyState}>{empty}</p>;
  return (
    <ul className={styles.cdList}>
      {rows.map((r) => (
        <li key={r.dealerId}>
          <button type="button" className={styles.cdRow} onClick={() => onSelectDealer(r.dealerId)}>
            <TypePill type={r.type} />
            <span className={styles.code}>{r.domain ?? '—'}</span>
            <span className={styles.cdRowMeta}>{r.indexStatus ?? 'unknown'}</span>
            <span className={styles.cdRowMeta}>sub {ageDays(r.submittedAt)}</span>
            <span className={styles.cdRowMeta}>seen {relative(r.inspectedAt)}</span>
            <span aria-hidden="true">→</span>
          </button>
        </li>
      ))}
    </ul>
  );
}

export function DealerIndexing({ data, onSelectDealer, propertyHeadroom }: Props) {
  return (
    <div className={styles.card}>
      <h2 className={styles.cardTitle}>
        Dealer Indexing <span className={styles.cdActive}>· {data.total} active</span>
      </h2>

      {data.total === 0 ? (
        <p className={styles.emptyState}>
          No active dealers. (Counts populate after the daily audit has inspected them.)
        </p>
      ) : (
        <>
          <DrilldownStat.Group>
            <DrilldownStat
              label="Indexed"
              value={data.indexed}
              accent="success"
              interactive={false}
            />
            <DrilldownStat label="Settling" value={data.settling} interactive={false} />
            <DrilldownStat
              label="Needs attention"
              value={data.needsAttention}
              accent={data.needsAttention > 0 ? 'warning' : 'default'}
            >
              <BucketList
                rows={data.needsAttentionList}
                onSelectDealer={onSelectDealer}
                empty="None — every active dealer is indexed or settling."
              />
            </DrilldownStat>
            <DrilldownStat label="Never inspected" value={data.neverInspected}>
              <BucketList
                rows={data.neverInspectedList.map((r) => ({
                  ...r,
                  indexStatus: null,
                  submittedAt: null,
                  inspectedAt: null,
                }))}
                onSelectDealer={onSelectDealer}
                empty="None."
              />
            </DrilldownStat>
          </DrilldownStat.Group>

          <p className={styles.cdSweep}>
            Last sweep: {data.lastSweepAt ? relative(data.lastSweepAt) : 'no inspections yet'}
          </p>

          {propertyHeadroom && (
            <p className={styles.cdHeadroom}>
              GSC properties: ≈{propertyHeadroom.ownedEstimate} / {propertyHeadroom.cap}
            </p>
          )}
        </>
      )}
    </div>
  );
}