import React from 'react';
import { CrawlingResponse } from '../../types/api';

interface AnalysisResultSectionProps {
  onBack: () => void;
  onGenerate?: () => void;
  data: CrawlingResponse;
}

const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, onGenerate, data }) => {
  const { processed_info, marketing_analysis, image_list } = data;
  const tags = marketing_analysis.tags || [];
  const facilities = marketing_analysis.facilities || [];

  return (
    <div className="w-full h-[100dvh] text-white flex flex-col p-3 py-2 sm:p-4 sm:py-3 md:p-6 lg:p-8 overflow-hidden bg-[#121a1d]">
      {/* 뒤로가기 버튼 */}
      <div className="w-full flex justify-start mb-2 sm:mb-3 shrink-0">
        <button
          onClick={onBack}
          className="flex items-center gap-1.5 py-1 px-3 sm:py-1.5 sm:px-4 rounded-full border border-gray-700 hover:bg-gray-800 transition-colors text-[9px] sm:text-[10px] md:text-xs text-gray-300"
        >
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M15 18l-6-6 6-6" />
          </svg>
          뒤로가기
        </button>
      </div>

      {/* 헤더 - 높이가 작을 때 숨김 */}
      <div className="hidden sm:flex flex-col items-center text-center mb-2 md:mb-4 shrink-0">
        <div className="text-[#a682ff] mb-1 animate-bounce">
          <svg className="w-4 h-4 md:w-5 md:h-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2l2.4 7.2L22 12l-7.6 2.4L12 22l-2.4-7.2L2 12l7.6-2.4z" />
          </svg>
        </div>
        <h1 className="text-lg md:text-xl lg:text-2xl font-bold mb-0.5">브랜드 분석</h1>
        <p className="text-gray-400 text-[9px] md:text-[10px] lg:text-xs font-light max-w-lg px-4">
          쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요.
        </p>
      </div>

      {/* 메인 콘텐츠 그리드 */}
      <div className="max-w-6xl mx-auto w-full grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3 md:gap-4 flex-1 min-h-0 overflow-hidden">
        {/* 브랜드 정체성 */}
        <div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 flex flex-col border border-white/5 shadow-xl overflow-hidden">
          <span className="text-[#a6ffea] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block shrink-0">브랜드 정체성</span>
          <h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold mb-0.5 shrink-0">{processed_info.customer_name}</h2>
          <p className="text-gray-500 text-[10px] sm:text-xs md:text-sm mb-2 sm:mb-3 shrink-0">{processed_info.region} · {processed_info.detail_region_info}</p>

          {/* 이미지 미리보기 */}
          {image_list.length > 0 && (
            <div className="mt-auto min-h-0 overflow-hidden">
              <span className="text-gray-500 text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 block shrink-0">수집된 이미지 ({image_list.length}장)</span>
              <div className="grid grid-cols-4 gap-1 sm:gap-1.5">
                {image_list.slice(0, 8).map((img, idx) => (
                  <div key={idx} className="aspect-square rounded sm:rounded-md overflow-hidden bg-[#121a1d]">
                    <img src={img} alt={`이미지 ${idx + 1}`} className="w-full h-full object-cover" />
                  </div>
                ))}
              </div>
              {image_list.length > 8 && (
                <p className="text-gray-500 text-[9px] sm:text-[10px] mt-1 text-center">+{image_list.length - 8}장 더 있음</p>
              )}
            </div>
          )}
        </div>

        {/* 오른쪽 카드들 */}
        <div className="flex flex-col gap-2 sm:gap-3 overflow-hidden">
          {/* 시설 정보 */}
          <div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl shrink-0">
            <span className="text-[#a682ff] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block">주요 시설</span>
            <div className="flex flex-wrap gap-1 sm:gap-1.5">
              {facilities.slice(0, 6).map((facility, idx) => (
                <span key={idx} className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-gray-400 border border-white/5">
                  {facility}
                </span>
              ))}
              {facilities.length > 6 && (
                <span className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-gray-500 border border-white/5">
                  +{facilities.length - 6}
                </span>
              )}
            </div>
          </div>

          {/* 추천 태그 */}
          <div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl shrink-0">
            <span className="text-[#a6ffea] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block">추천 마케팅 태그</span>
            <div className="flex flex-wrap gap-1 sm:gap-1.5">
              {tags.slice(0, 6).map((tag, idx) => (
                <span key={idx} className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-[#a6ffea]/80 border border-[#a6ffea]/10">
                  {tag}
                </span>
              ))}
              {tags.length > 6 && (
                <span className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-[#a6ffea]/50 border border-[#a6ffea]/10">
                  +{tags.length - 6}
                </span>
              )}
            </div>
          </div>

          {/* 마케팅 분석 요약 */}
          <div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl flex-1 min-h-0 overflow-hidden flex flex-col">
            <span className="text-[#a682ff] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block shrink-0">마케팅 분석</span>
            <div className="text-gray-400 text-[9px] sm:text-[10px] leading-relaxed overflow-y-auto custom-scrollbar flex-1 min-h-0">
              {marketing_analysis.report.split('\n').slice(0, 3).map((line, idx) => (
                <p key={idx} className="mb-1 sm:mb-1.5">{line.replace(/^#+\s*/, '')}</p>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* 하단 버튼 */}
      <div className="mt-2 sm:mt-3 md:mt-4 flex justify-center shrink-0 py-2 sm:py-3 md:py-4">
        <button
          onClick={onGenerate}
          className="bg-[#a682ff] hover:bg-[#9570f0] text-white font-bold py-2 sm:py-2.5 md:py-3 px-6 sm:px-10 md:px-14 rounded-full transition-all transform active:scale-95 shadow-lg shadow-[#a682ff33] text-[9px] sm:text-[10px] md:text-xs"
        >
          콘텐츠 생성
        </button>
      </div>
    </div>
  );
};

export default AnalysisResultSection;