import { useRef, useState } from 'react';
import { LogViewer, Button } from '@cameleer/design-system';
import type { LogEntry } from '@cameleer/design-system';
import { RefreshCw } from 'lucide-react';
import { useStartupLogs } from '../api/queries/logs';
import type { Deployment } from '../api/queries/admin/apps';
import styles from './StartupLogPanel.module.css';

interface StartupLogPanelProps {
  deployment: Deployment;
  appSlug: string;
  envSlug: string;
  className?: string;
}

export function StartupLogPanel({ deployment, appSlug, envSlug, className }: StartupLogPanelProps) {
  const isStarting = deployment.status === 'STARTING';
  const isFailed = deployment.status === 'FAILED';
  const [sort, setSort] = useState<'asc' | 'desc'>('desc');
  const scrollRef = useRef<HTMLDivElement>(null);

  const query = useStartupLogs(appSlug, envSlug, deployment.createdAt, isStarting, sort);
  const entries = query.data?.data ?? [];

  const scrollToLatest = () => {
    const el = scrollRef.current;
    if (!el || typeof el.scrollTo !== 'function') return;
    // asc → latest at bottom; desc → latest at top
    const top = sort === 'asc' ? el.scrollHeight : 0;
    el.scrollTo({ top, behavior: 'smooth' });
  };

  const handleRefresh = async () => {
    await query.refetch?.();
    scrollToLatest();
  };

  if (entries.length === 0 && !isStarting) return null;

  return (
    <div className={`${styles.panel}${className ? ` ${className}` : ''}`}>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <span className={styles.title}>Startup Logs</span>
          {isStarting && (
            <>
              <span className={`${styles.badge} ${styles.badgeLive}`}>● live</span>
              <span className={styles.pollingHint}>polling every 3s</span>
            </>
          )}
          {isFailed && (
            <span className={`${styles.badge} ${styles.badgeStopped}`}>stopped</span>
          )}
        </div>
        <div className={styles.headerRight}>
          <span className={styles.lineCount}>{entries.length} entries</span>
          <Button
            variant="ghost"
            size="sm"
            disabled={query.isFetching}
            onClick={() => setSort((s) => (s === 'asc' ? 'desc' : 'asc'))}
            title={sort === 'asc' ? 'Oldest first' : 'Newest first'}
            aria-label={sort === 'asc' ? 'Oldest first' : 'Newest first'}
          >
            {sort === 'asc' ? '\u2191' : '\u2193'}
          </Button>
          <Button
            variant="ghost"
            size="sm"
            disabled={query.isFetching}
            onClick={handleRefresh}
            title="Refresh"
            aria-label="Refresh"
          >
            <RefreshCw size={14} />
          </Button>
        </div>
      </div>
      <div ref={scrollRef} className={styles.scrollWrap}>
        {entries.length > 0 ? (
          <LogViewer entries={entries as unknown as LogEntry[]} />
        ) : (
          <div className={styles.empty}>Waiting for container output...</div>
        )}
      </div>
    </div>
  );
}