'use client';

import React from 'react';

function renderBoldText(text: string): React.ReactNode[] {
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((part, i) => {
    if (part.startsWith('**') && part.endsWith('**')) {
      return <strong key={i}>{part.slice(2, -2)}</strong>;
    }
    return <span key={i}>{part}</span>;
  });
}

interface QnaRendererProps {
  question?: string;
  answer?: string;
  expertName?: string;
  channelName?: string;
  collectedAt?: any;
}

export default function QnaRenderer({ question, answer, expertName, channelName, collectedAt }: QnaRendererProps) {
  if (!question && !answer) return null;

  const formatDate = (ts: any): string => {
    if (!ts) return '';
    const d = ts instanceof Date ? ts : ts?.toDate?.();
    if (!d) return '';
    return d.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
  };

  return (
    <div className="space-y-4">
      {/* 질문 카드 */}
      {question && (
        <div className="bg-blue-50 border border-blue-200 rounded-2xl p-5">
          <div className="flex items-start gap-3">
            <span className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">Q</span>
            <div className="flex-1 min-w-0">
              <p className="text-gray-900 font-bold leading-relaxed whitespace-pre-wrap">{renderBoldText(question)}</p>
            </div>
          </div>
        </div>
      )}

      {/* 답변 카드 */}
      {answer && (
        <div className="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm">
          <div className="flex items-start gap-3">
            <span className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-600 font-bold text-sm">A</span>
            <div className="flex-1 min-w-0">
              <p className="text-gray-800 leading-relaxed whitespace-pre-wrap">{renderBoldText(answer)}</p>
            </div>
          </div>

          {/* 전문가 정보 + 출처 */}
          {(expertName || channelName) && (
            <div className="mt-4 pt-3 border-t border-gray-100 flex flex-wrap items-center gap-3 text-xs text-gray-500">
              {expertName && (
                <span className="inline-flex items-center gap-1 px-2 py-1 bg-emerald-50 text-emerald-700 rounded-full font-medium">
                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                  {expertName}
                </span>
              )}
              {channelName && (
                <span className="inline-flex items-center gap-1 px-2 py-1 bg-yellow-50 text-yellow-700 rounded-full font-medium">
                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
                  </svg>
                  {channelName}
                </span>
              )}
              {collectedAt && (
                <span className="text-gray-400">{formatDate(collectedAt)}</span>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}