import { Link } from 'react-router';
import { Download, Sparkles } from 'lucide-react';
import type { SessionData } from '@/api/generated/model/sessionData';
import type { QuotationCardData } from '@/api/generated/model/quotationCardData';
import type { ChatMessageData } from '@/api/generated/model/chatMessageData';
import { ChatSender, CardType } from '@/api/generated/model';
import SlateRenderer from '@/components/SlateRenderer';
import { Typography } from '@/components/ui/typography';
import { StatusPill, sessionStatusTone } from './StatusPill';
import { type Product, type Partner, sessionStatusLabel } from '../../types';
import { maskPrices } from '@/lib/utils';
import { useCompanySettings } from '@/features/settings/useCompanySettings';
import { renderEmphasis } from '@/lib/emphasis';

// 협상로그 JSON 다운로드(IMK #9). 가격·비율 숫자는 maskPrices 로 가려 내보낸다(화면 표기와 동일 규칙).
// target_price 등 숫자 필드는 아예 제외 — 양식은 대화 흐름(순번/발화자/스텝/멘트/카드사용) 중심.
function exportChatJson(
  session: SessionData | undefined,
  supplierName: string,
  productName: string | undefined,
  messages: ChatMessageData[],
  serverCards: QuotationCardData[],
) {
  const payload = {
    exported_at: new Date().toISOString(),
    session_id: session?.session_id ?? null,
    qt_number: session?.qt_number ?? null,
    supplier: supplierName || null,
    product: productName ?? null,
    status: session ? sessionStatusLabel(session.status) : null,
    message_count: messages.length,
    messages: messages.map((m) => {
      // 사용 카드는 화면 버블과 동일하게 card_id(=카드 PK) 로 매칭. session_card_id 는 nego/wild 카드 PK.
      const card = m.card_used_yn ? serverCards.find((c) => c.session_card_id === m.card_id) : undefined;
      return {
        seq: m.index,
        sender: m.sender === ChatSender.BOT ? 'BOT' : 'PARTNER',
        step: m.step ?? null,
        script: maskPrices(String(m.script ?? '')),
        card: card
          ? {
              number: card.number ?? null,
              name: card.name ?? null,
              type: card.type === CardType.WILD ? 'wild' : 'nego',
            }
          : null,
      };
    }),
  };
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `협상로그_${session?.qt_number ?? 'session'}_${(supplierName || '').replace(/\s+/g, '')}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

export function ChatTab({
  serverSessions,
  partners,
  effectiveSessionId,
  onSelectSession,
  chatMessages,
  currentSupplierName,
  currentProduct,
  serverCards,
}: {
  serverSessions: SessionData[];
  partners: Partner[];
  effectiveSessionId: string | null;
  onSelectSession: (sessionId: string) => void;
  chatMessages: ChatMessageData[];
  currentSupplierName: string;
  currentProduct: Product | undefined;
  serverCards: QuotationCardData[];
}) {
  // 목표가는 협상(세션) 단위 고정값(sessions.target_price)이라 메시지마다가 아니라 헤더에 한 번만 표시한다.
  const currentSession = serverSessions.find((s) => s.session_id === effectiveSessionId);
  const targetPrice = currentSession?.target_price;
  // 협상완료 부가정보(sessions.custom) — 공급사가 타결 후 입력. 라벨은 회사 설정(session_fields)에서.
  const { settings } = useCompanySettings();
  const sessionFields = settings.session_fields ?? [];
  const extraRows = (sd: SessionData | null) => {
    const custom = sd?.custom as Record<string, unknown> | undefined;
    const rows = sessionFields
      .map((f) => ({ label: f.label, value: custom?.[f.key] }))
      .filter((r) => r.value !== undefined && r.value !== null && r.value !== '');
    // 의견은 회사설정과 무관한 내장 공통 필드(custom.opinion) — 값 있으면 항상 표시
    if (custom?.opinion) rows.push({ label: '의견', value: custom.opinion });
    return rows;
  };
  return (
    <div className="h-[500px] border border-border rounded-lg overflow-hidden bg-card flex">
      {/* Sessions list */}
      <div className="w-1/3 border-r border-border bg-muted/20 flex flex-col">
        <Typography as="div" variant="mono" className="p-3 border-b border-border bg-muted/40 text-[10px]">
          참여자 협력사 리스트
        </Typography>
        <div className="flex-1 min-h-0 overflow-y-auto divide-y divide-border font-sans">
          {serverSessions.length === 0 && (
            <Typography as="div" variant="small" className="p-4 text-center text-muted-foreground text-xs font-mono">
              참여 협상 세션이 없습니다. (리스트가 비어 있습니다)
            </Typography>
          )}
          {serverSessions.map((sd) => {
            const isSelected = sd.session_id === effectiveSessionId;
            const name = partners.find((p) => p.id === sd.supplier_id)?.name || sd.supplier_id;
            const statusLabel = sessionStatusLabel(sd.status);
            return (
              <div
                key={sd.session_id}
                onClick={() => onSelectSession(sd.session_id)}
                className={`w-full text-left p-3 flex flex-col justify-between transition-colors cursor-pointer ${
                  isSelected ? 'bg-primary/5 border-l-4 border-primary' : 'hover:bg-muted/30'
                }`}
              >
                <div className="flex items-center justify-between">
                  <Typography as="span" variant="small" className="text-xs font-bold text-foreground">{name}</Typography>
                  <StatusPill tone={sessionStatusTone(sd.status)} className="text-[9px] px-1.5 rounded">
                    {statusLabel}
                  </StatusPill>
                </div>
                <div className="flex items-center justify-between mt-2">
                  <Typography as="span" variant="small" className="text-[10px] font-mono text-muted-foreground">최종 제의</Typography>
                  <Typography as="span" variant="small" className="text-[10px] font-mono font-bold text-foreground">
                    {sd.bid_price ? `₩${Number(sd.bid_price).toLocaleString()}` : '-'}
                  </Typography>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Chat zone */}
      <div className="flex-1 flex flex-col bg-background justify-between">
        <div className="p-3 bg-muted/30 border-b border-border flex items-center justify-between">
          <Typography as="div" variant="small" className="text-xs font-mono text-muted-foreground">
            협력사: <Typography as="span" variant="small" className="text-xs font-mono font-bold text-foreground">{currentSupplierName}</Typography>
          </Typography>
          <div className="flex items-center gap-4">
            {targetPrice != null && (
              <Typography as="span" variant="small" className="text-xs font-mono text-muted-foreground">
                목표가: <Typography as="span" variant="small" className="text-xs font-mono font-bold text-foreground">₩{Number(targetPrice).toLocaleString()}</Typography>
              </Typography>
            )}
            <Typography as="span" variant="small" className="text-xs font-mono text-muted-foreground">
              기록: <Typography as="span" variant="small" className="text-xs font-mono font-semibold text-foreground">{chatMessages.length}</Typography> 메시지
            </Typography>
            <button
              type="button"
              onClick={() => exportChatJson(currentSession, currentSupplierName, currentProduct?.name, chatMessages, serverCards)}
              disabled={chatMessages.length === 0}
              title="협상로그 JSON 내보내기 (금액 숫자는 가려서 저장)"
              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded border border-border text-[10px] font-mono text-muted-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
            >
              <Download size={11} />
              JSON
            </button>
          </div>
        </div>

        {/* 채팅에선 선택 세션의 부가정보를 밴드로 전부 노출. 리스트 버튼(모달)과 병행. */}
        {extraRows(currentSession ?? null).length > 0 && (
          <div className="px-3 py-2 bg-emerald-500/5 border-b border-border flex flex-wrap items-center gap-x-3 gap-y-1">
            <Typography as="span" variant="small" className="text-[10px] font-mono font-bold text-emerald-700 dark:text-emerald-400">협상완료 부가정보</Typography>
            {extraRows(currentSession ?? null).map((r) => (
              <Typography key={r.label} as="span" variant="small" className="text-[11px] font-mono text-muted-foreground">
                {r.label}: <span className="font-semibold text-foreground">{String(r.value)}</span>
              </Typography>
            ))}
          </div>
        )}

        <div className="flex-1 min-h-0 p-4 overflow-y-auto space-y-4">
          {!effectiveSessionId ? (
            <Typography as="div" variant="small" className="h-full flex items-center justify-center text-muted-foreground font-mono text-xs">
              선택된 협력사가 없습니다.
            </Typography>
          ) : chatMessages.length === 0 ? (
            <Typography as="div" variant="small" className="h-full flex items-center justify-center text-muted-foreground font-mono text-xs">
              기록된 협상 대화가 없습니다.
            </Typography>
          ) : (
            chatMessages.map((m) =>
              m.sender === ChatSender.BOT ? (
                <BotBubble
                  key={m.chat_id}
                  message={m}
                  currentSupplierName={currentSupplierName}
                  currentProduct={currentProduct}
                  serverCards={serverCards}
                />
              ) : (
                <PartnerBubble
                  key={m.chat_id}
                  message={m}
                  currentSupplierName={currentSupplierName}
                  currentProduct={currentProduct}
                  serverCards={serverCards}
                />
              ),
            )
          )}
        </div>
      </div>

    </div>
  );
}

// 봇(좌측) 말풍선. 진행 단계·협상 스크립트(가격 마스킹)·사용 협상카드를 보여준다.
//   간격은 부모(flex flex-col gap)에서 주고, 말풍선 박스는 block 으로 둬 긴 텍스트 줄바꿈이 깨지지 않게 한다.
function BotBubble({
  message,
  currentSupplierName,
  currentProduct,
  serverCards,
}: {
  message: ChatMessageData;
  currentSupplierName: string;
  currentProduct: Product | undefined;
  serverCards: QuotationCardData[];
}) {
  const m = message;
  // 카드 사용 메시지는 같은 멘트가 아래 카드 박스에 그대로 나오므로 본문 script 는 중복 → 카드 없을 때만 노출.
  const usedCard = findUsedCard(m, serverCards);
  return (
    <div className="flex justify-start">
      <div className="flex flex-col gap-1.5 max-w-[85%]">
        <div className="flex items-center gap-1.5 text-muted-foreground">
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">Negosium Bot</Typography>
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">·</Typography>
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">#{m.index}</Typography>
        </div>
        <div className="p-3 rounded-md border shadow-xs bg-secondary border-border text-foreground space-y-1.5">
          {m.step && (
            <Typography as="div" variant="mono" className="text-[10px] tracking-wide opacity-60 text-inherit">
              {m.step}
            </Typography>
          )}
          {m.script && !usedCard && (
            <Typography as="p" variant="small" className="text-xs whitespace-pre-line leading-relaxed text-inherit">
              {renderEmphasis(maskPrices(m.script))}
            </Typography>
          )}
          <UsedCardBox
            message={m}
            isBot
            currentSupplierName={currentSupplierName}
            currentProduct={currentProduct}
            serverCards={serverCards}
          />
        </div>
      </div>
    </div>
  );
}

// 협력사(우측) 말풍선. 협력사 입력값을 보여주되, 채팅 '내용'에 제시 금액이 노출되지 않도록 maskPrices 로 가린다.
function PartnerBubble({
  message,
  currentSupplierName,
  currentProduct,
  serverCards,
}: {
  message: ChatMessageData;
  currentSupplierName: string;
  currentProduct: Product | undefined;
  serverCards: QuotationCardData[];
}) {
  const m = message;
  return (
    <div className="flex justify-end">
      <div className="flex flex-col gap-1.5 max-w-[85%]">
        <div className="flex items-center justify-end gap-1.5 text-muted-foreground">
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">{currentSupplierName}</Typography>
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">·</Typography>
          <Typography as="span" variant="small" className="text-[10px] font-mono text-inherit">#{m.index}</Typography>
        </div>
        <div className="p-3 rounded-md border shadow-xs bg-primary border-transparent text-primary-foreground space-y-1.5">
          {m.step && (
            <Typography as="div" variant="mono" className="text-[10px] tracking-wide opacity-60 text-inherit">
              {m.step}
            </Typography>
          )}
          {m.script && (
            <Typography as="p" variant="small" className="text-xs whitespace-pre-line leading-relaxed text-inherit">
              {maskPrices(m.script)}
            </Typography>
          )}
          <UsedCardBox
            message={m}
            isBot={false}
            currentSupplierName={currentSupplierName}
            currentProduct={currentProduct}
            serverCards={serverCards}
          />
        </div>
      </div>
    </div>
  );
}

// 말풍선에 붙는 협상카드 박스(봇/협력사 공용). 카드 미사용 메시지면 아무것도 렌더하지 않는다.
//   톤(amber/primary)만 isBot 으로 가르고, 멘트/조건/메모 렌더 로직은 공유한다.
function UsedCardBox({
  message,
  isBot,
  currentSupplierName,
  currentProduct,
  serverCards,
}: {
  message: ChatMessageData;
  isBot: boolean;
  currentSupplierName: string;
  currentProduct: Product | undefined;
  serverCards: QuotationCardData[];
}) {
  const m = message;
  const usedCard = findUsedCard(m, serverCards);
  if (!usedCard) return null;
  const cardNodes = Array.isArray(usedCard.edit_script) ? (usedCard.edit_script as unknown[]) : null;
  const isWildCard = usedCard.type === CardType.WILD;
  const cardDetailId = usedCard.nego_card_id ?? usedCard.wild_card_id ?? null; // 협상카드 상세(/cards?detail=) 링크용

  return (
    <div
      className={`rounded border p-2 ${
        isBot
          ? 'bg-amber-50/70 border-amber-200 dark:bg-amber-950/20 dark:border-amber-900/40'
          : 'bg-white/10 border-white/20'
      }`}
    >
      {/* 헤더: 어떤 카드인지(번호·이름·종류) */}
      <div className={`flex items-center gap-1 ${isBot ? 'text-amber-800 dark:text-amber-300' : 'text-primary-foreground'}`}>
        <Sparkles size={10} />
        <Typography as="span" variant="small" className="text-[10px] font-semibold text-inherit">협상카드</Typography>
        {cardDetailId ? (
          <Link
            to={`/cards?detail=${cardDetailId}`}
            className="inline-flex items-center gap-1 text-inherit underline underline-offset-2 decoration-1"
            title={`${usedCard.name ?? ''} — 협상카드 상세로 이동`}
          >
            {usedCard.number && (
              <Typography as="span" variant="small" className="text-[10px] font-mono font-semibold opacity-70 text-inherit">#{usedCard.number}</Typography>
            )}
            {usedCard.name && (
              <Typography as="span" variant="small" className="text-[10px] font-semibold text-inherit">· {usedCard.name}</Typography>
            )}
          </Link>
        ) : (
          <>
            {usedCard.number && (
              <Typography as="span" variant="small" className="text-[10px] font-mono font-semibold opacity-70 text-inherit">#{usedCard.number}</Typography>
            )}
            {usedCard.name && (
              <Typography as="span" variant="small" className="text-[10px] font-semibold text-inherit">· {usedCard.name}</Typography>
            )}
          </>
        )}
        <Typography
          as="span"
          variant="small"
          className={`ml-auto px-1.5 py-0.5 rounded text-[10px] font-bold ${
            isWildCard
              ? 'bg-amber-200 text-amber-900 dark:bg-amber-400/25 dark:text-amber-100'
              : 'bg-zinc-200 text-zinc-700 dark:bg-zinc-600/40 dark:text-zinc-100'
          }`}
        >
          {isWildCard ? '와일드' : '협상'}
        </Typography>
      </div>

      {/* 멘트 본문: 서식본(edit_script) 우선, 없으면 평문 script. 가격 변수는 매핑하지 않아(값 미주입) 실가격이 노출되지 않는다. */}
      {cardNodes ? (
        <div className="mt-1.5">
          <SlateRenderer
            nodes={cardNodes}
            variables={{
              partner_name: currentSupplierName,
              product_name: currentProduct?.name ?? '',
            }}
          />
        </div>
      ) : usedCard.script ? (
        <Typography as="p" variant="small" className="mt-1.5 text-xs leading-relaxed whitespace-pre-line text-foreground/85">
          {maskPrices(usedCard.script)}
        </Typography>
      ) : null}

      {/* 와일드카드 부가 정보: 사용 조건 / 메모 */}
      {isWildCard && (usedCard.condition || usedCard.memo) && (
        <div className="mt-1.5 pt-1.5 border-t border-amber-200/60 dark:border-amber-900/40 space-y-0.5 text-muted-foreground">
          {usedCard.condition && (
            <Typography as="div" variant="caption" className="text-[10px] text-inherit">
              <Typography as="span" variant="caption" className="text-[10px] font-semibold text-inherit">조건:</Typography> {usedCard.condition}
            </Typography>
          )}
          {usedCard.memo && (
            <Typography as="div" variant="caption" className="text-[10px] text-inherit">
              <Typography as="span" variant="caption" className="text-[10px] font-semibold text-inherit">메모:</Typography> {usedCard.memo}
            </Typography>
          )}
        </div>
      )}
    </div>
  );
}

// 메시지가 사용한 협상카드를 card_id(=카드 PK)로 매칭. 카드 미사용이면 undefined.
function findUsedCard(m: ChatMessageData, serverCards: QuotationCardData[]): QuotationCardData | undefined {
  return m.card_used_yn ? serverCards.find((c) => c.session_card_id === m.card_id) : undefined;
}