import { useCallback, useEffect, useState } from "react";
import type { DeckAccount, DeckColumn, ChatState } from "../types/app";
import { twitterClient } from "../lib/client/twitterClient";
import { ChatCard } from "./ChatCard";

interface ChatColumnProps {
  column: DeckColumn & { kind: "chat" };
  account: DeckAccount;
  onRemove: () => void;
}

export function ChatColumn({ column, account, onRemove }: ChatColumnProps) {
  const [state, setState] = useState<ChatState>({ entries: [], isLoading: false });
  const [error, setError] = useState<string | undefined>();

  const refresh = useCallback(async () => {
    setState(prev => ({ ...prev, isLoading: true }));
    setError(undefined);
    try {
      const notifications = await twitterClient.notifications({ cookie: account.cookie });
      setState({ entries: notifications, isLoading: false });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to refresh chat");
      setState(prev => ({ ...prev, isLoading: false }));
    }
  }, [account.cookie]);

  useEffect(() => {
    refresh();
  }, [refresh, account.id]);

  return (
    <article className="column">
      <header>
        <div>
          <p className="eyebrow">Signal</p>
          <h3>{column.title || "Chat"}</h3>
          <p className="muted tiny">Mentions, follows and notifications for {account.label}</p>
        </div>
        <div className="column-actions">
          <button className="ghost" onClick={refresh} aria-label="Refresh chat">
            ↻
          </button>
          <button className="ghost" onClick={onRemove} aria-label="Remove column">
            ×
          </button>
        </div>
      </header>
      {error && <p className="error">{error}</p>}
      {state.isLoading && !state.entries.length ? (
        <div className="column-loading">Loading…</div>
      ) : (
        <div className="chat-stack">
          {state.entries.map(entry => (
            <ChatCard key={entry.id} notification={entry} accent={account.accent} />
          ))}
          {!state.entries.length && <p className="muted">No recent notifications.</p>}
        </div>
      )}
    </article>
  );
}