import React from 'react';
import type { StrategyResponse, Campaign, AdSet, AdCreative } from '../types';

interface ResultDisplayProps {
  strategy: StrategyResponse;
}

const InfoCard: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
    <div className="bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
        <h2 className="text-2xl font-bold text-blue-400 mb-4 border-b-2 border-blue-500/30 pb-2">{title}</h2>
        <div className="prose prose-invert max-w-none text-gray-300">{children}</div>
    </div>
);

const AdCreativeCard: React.FC<{ creative: AdCreative }> = ({ creative }) => (
    <div className="bg-gray-700/50 p-3 rounded-md flex items-start space-x-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-green-400 mt-1 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
            <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
        </svg>
        <p className="text-gray-300">{creative.description}</p>
    </div>
);

const AdSetCard: React.FC<{ adSet: AdSet }> = ({ adSet }) => (
    <div className="bg-gray-800 p-4 rounded-lg border border-gray-700 mb-4">
        <h4 className="text-xl font-semibold text-teal-300 mb-3">{adSet.name}</h4>
        <div className="space-y-4">
            <div>
                <h5 className="font-bold text-gray-200">Penargetan (Targeting):</h5>
                <p className="text-sm text-gray-400 mt-1"><strong>Demografi:</strong> {adSet.targeting.demographics}</p>
                {adSet.targeting.behaviors && adSet.targeting.behaviors.length > 0 && (
                    <p className="text-sm text-gray-400"><strong>Perilaku:</strong> {adSet.targeting.behaviors.join(', ')}</p>
                )}
                <div className="mt-2">
                    <p className="text-sm font-semibold text-gray-400 mb-1">Minat (Interests):</p>
                    <div className="flex flex-wrap gap-2">
                        {adSet.targeting.interests.map((interest, i) => (
                            <span key={i} className="bg-teal-500/20 text-teal-300 text-xs font-medium px-2.5 py-1 rounded-full">{interest}</span>
                        ))}
                    </div>
                </div>
            </div>
             <div>
                <h5 className="font-bold text-gray-200">Materi Iklan (Ad Creatives):</h5>
                <div className="mt-2 space-y-2">
                    {adSet.creatives.map(creative => <AdCreativeCard key={creative.id} creative={creative} />)}
                </div>
            </div>
            <div>
                <h5 className="font-bold text-gray-200">Alasan:</h5>
                <p className="text-gray-400 text-sm italic mt-1">{adSet.reasoning}</p>
            </div>
        </div>
    </div>
);

const CampaignCard: React.FC<{ campaign: Campaign }> = ({ campaign }) => (
    <div className="bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
        <div className="mb-4">
            <span className="bg-purple-500/20 text-purple-300 text-sm font-medium px-3 py-1 rounded-full">{campaign.objective}</span>
        </div>
        <h3 className="text-3xl font-bold text-purple-400 mb-2">{campaign.name}</h3>
        <p className="text-gray-400 italic mb-6">{campaign.reasoning}</p>
        <div>
            {campaign.adSets.map(adSet => <AdSetCard key={adSet.id} adSet={adSet} />)}
        </div>
    </div>
);

const ResultDisplay: React.FC<ResultDisplayProps> = ({ strategy }) => {
  const { productAnalysis, overallStrategyReasoning, budget, campaigns } = strategy;

  return (
    <div className="mt-8 space-y-8">
      <InfoCard title="Analisis Produk">
        <p>{productAnalysis}</p>
      </InfoCard>

      <InfoCard title="Alasan Strategi Keseluruhan">
        <p>{overallStrategyReasoning}</p>
      </InfoCard>

       <div className="bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
            <h2 className="text-2xl font-bold text-green-400 mb-4 border-b-2 border-green-500/30 pb-2">Rekomendasi Anggaran</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                <div>
                    <p className="text-4xl font-bold text-white">
                        {new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(budget.totalMonthly)}
                        <span className="text-lg font-normal text-gray-400">/bulan</span>
                    </p>
                    <p className="text-xl text-gray-300 mt-1">
                        Estimasi ~{new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(budget.dailyEstimate)}/hari
                    </p>
                </div>
                <div className="prose prose-invert max-w-none text-gray-300">
                    <p className="italic">{budget.reasoning}</p>
                </div>
            </div>
        </div>

      <div>
        <h2 className="text-4xl font-extrabold text-center mb-8 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">Struktur Kampanye</h2>
        {campaigns.map(campaign => <CampaignCard key={campaign.id} campaign={campaign} />)}
      </div>
    </div>
  );
};

export default ResultDisplay;