import React, { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line } from 'recharts';
import { Twitter, Tv, Clapperboard, DollarSign, TrendingUp, Users, Crown, ArrowUp, ArrowDown } from 'lucide-react';

// --- モックデータ ---

// X(Twitter)の話題量データ (1クール分)
const twitterData = [
  { week: '1週', 'ツイート数': 12000 },
  { week: '2週', 'ツイート数': 18500 },
  { week: '3週', 'ツイート数': 25000 },
  { week: '4週', 'ツイート数': 22000 },
  { week: '5週', 'ツイート数': 31000 },
  { week: '6週', 'ツイート数': 28000 },
  { week: '7週', 'ツイート数': 45000 },
  { week: '8週', 'ツイート数': 42000 },
  { week: '9週', 'ツイート数': 58000 },
  { week: '10週', 'ツイート数': 75000 },
  { week: '11週', 'ツイート数': 92000 },
  { week: '12週', 'ツイート数': 150000 },
];

// 収益データ (百万円単位)
const revenueData = [
  { name: '配信', '予測': 80, '実績': 95 },
  { name: '商品化', '予測': 120, '実績': 110 },
  { name: '海外', '予測': 50, '実績': 65 },
  { name: 'ゲーム化', '予測': 30, '実績': 40 },
  { name: 'イベント', '予測': 20, '実績': 25 },
];

// 配信プラットフォームのランキングデータ
const streamingPlatforms = [
  { name: 'AnimeFlix', rank: 1, icon: '👑' },
  { name: 'D-Stream', rank: 2, icon: '🥈' },
  { name: 'U-NEXT', rank: 1, icon: '👑' },
  { name: 'ABEMA', rank: 3, icon: '🥉' },
  { name: 'Prime Video', rank: 2, icon: '🥈' },
];

// --- コンポーネント定義 ---

// 各セクションのカードコンポーネント
const Card = ({ children, className = '' }) => (
  <div className={`bg-gray-800 border border-gray-700 rounded-xl shadow-lg p-4 sm:p-6 flex flex-col ${className}`}>
    {children}
  </div>
);

// KPIサマリーカード
const KpiCard = ({ title, value, insight, icon, change, changeType }) => {
  const IconComponent = icon;
  const changeColor = changeType === 'positive' ? 'text-green-400' : 'text-red-400';
  const ChangeIcon = changeType === 'positive' ? ArrowUp : ArrowDown;

  return (
    <Card>
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium text-gray-400">{title}</h3>
        <IconComponent className="h-6 w-6 text-gray-500" />
      </div>
      <p className="mt-2 text-3xl font-bold text-white">{value}</p>
      <div className="flex items-center mt-1">
        {change && (
          <div className={`flex items-center text-sm ${changeColor}`}>
            <ChangeIcon className="h-4 w-4 mr-1" />
            <span>{change}</span>
          </div>
        )}
      </div>
      <p className="text-xs text-cyan-400 mt-auto pt-2">{insight}</p>
    </Card>
  );
};


// --- メインのAppコンポーネント ---

export default function App() {
  return (
    <div className="min-h-screen bg-gray-900 text-white font-sans p-4 sm:p-6 lg:p-8">
      <header className="mb-8">
        <h1 className="text-3xl font-bold text-white">アニメ「ヴィジランテ」ダッシュボード</h1>
        <p className="text-gray-400 mt-1">作品の各種データを統合し、リアルタイムで分析します。</p>
      </header>

      <main>
        {/* KPIサマリーセクション */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <KpiCard
            title="X 話題量 (今週)"
            value="15万"
            icon={Twitter}
            change="+58,000 (前週比)"
            changeType="positive"
            insight="キーインサイト: 同クール中 1位"
          />
          <KpiCard
            title="視聴率 (最新話)"
            value="5.8%"
            icon={Tv}
            change="+0.5pt (前話比)"
            changeType="positive"
            insight="キーインサイト: シーズン最高視聴率"
          />
          <KpiCard
            title="配信ランキング (総合)"
            value="1位"
            icon={Crown}
            change="主要5PF中2PFで1位"
            changeType="positive"
            insight="キーインサイト: 全体で首位を維持"
          />
          <KpiCard
            title="収益実績 (累計)"
            value="3.35億円"
            icon={DollarSign}
            change="+0.4億円 (予測比)"
            changeType="positive"
            insight="キーインサイト: 予測を13%上回る"
          />
        </div>

        {/* メイングリッド */}
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
          
          {/* 左側のカラム */}
          <div className="lg:col-span-3 flex flex-col gap-6">
            {/* X 話題量 */}
            <Card className="h-[350px]">
              <h3 className="text-lg font-semibold text-white flex items-center">
                <TrendingUp className="h-5 w-5 mr-2 text-cyan-400" />X 話題量の推移
              </h3>
              <p className="text-sm text-gray-400 mb-4">各話放送後のツイート量を集計。</p>
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={twitterData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                  <XAxis dataKey="week" stroke="#9ca3af" fontSize={12} />
                  <YAxis stroke="#9ca3af" fontSize={12} tickFormatter={(value) => `${value/1000}k`} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151', color: '#f9fafb' }}
                    labelStyle={{ color: '#9ca3af' }}
                  />
                  <Legend wrapperStyle={{fontSize: "14px"}} />
                  <Line type="monotone" dataKey="ツイート数" stroke="#22d3ee" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 8 }} />
                </LineChart>
              </ResponsiveContainer>
            </Card>

            {/* 収益 */}
            <Card className="h-[350px]">
              <h3 className="text-lg font-semibold text-white flex items-center">
                <DollarSign className="h-5 w-5 mr-2 text-cyan-400" />窓口別 収益予測・実績 (百万円)
              </h3>
              <p className="text-sm text-gray-400 mb-4">各事業の収益性を比較。</p>
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={revenueData} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
                  <XAxis dataKey="name" stroke="#9ca3af" fontSize={12} />
                  <YAxis stroke="#9ca3af" fontSize={12} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151', color: '#f9fafb' }}
                    labelStyle={{ color: '#9ca3af' }}
                    cursor={{fill: 'rgba(107, 114, 128, 0.2)'}}
                  />
                  <Legend wrapperStyle={{fontSize: "14px"}} />
                  <Bar dataKey="予測" fill="#4b5563" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="実績" fill="#22d3ee" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </Card>
          </div>

          {/* 右側のカラム */}
          <div className="lg:col-span-2 flex flex-col gap-6">
            {/* 配信ランキング */}
            <Card className="flex-grow">
              <h3 className="text-lg font-semibold text-white flex items-center">
                <Clapperboard className="h-5 w-5 mr-2 text-cyan-400" />主要プラットフォーム配信順位
              </h3>
              <p className="text-sm text-gray-400 mb-4">最新の週間ランキング。</p>
              <div className="space-y-4">
                {streamingPlatforms.map((platform, index) => (
                  <div key={index} className="flex items-center justify-between bg-gray-700/50 p-3 rounded-lg">
                    <span className="font-medium text-white">{platform.name}</span>
                    <span className={`font-bold text-lg ${platform.rank === 1 ? 'text-yellow-400' : 'text-white'}`}>
                      {platform.icon} {platform.rank}位
                    </span>
                  </div>
                ))}
              </div>
               <div className="mt-auto pt-4">
                 <p className="text-sm font-semibold text-cyan-400">キーインサイト:</p>
                 <p className="text-sm text-gray-300">若年層に人気のAnimeFlixとU-NEXTで1位を獲得したことが、全体の話題量を牽引しています。</p>
               </div>
            </Card>
            
            {/* 視聴率 */}
            <Card className="flex-grow">
               <h3 className="text-lg font-semibold text-white flex items-center">
                <Tv className="h-5 w-5 mr-2 text-cyan-400" />視聴率分析
              </h3>
               <p className="text-sm text-gray-400 mb-4">世帯視聴率の動向。</p>
              <div className="text-center my-4">
                  <p className="text-gray-400">最新話 (12話)</p>
                  <p className="text-6xl font-bold text-cyan-400 my-2">5.8%</p>
                  <div className="flex items-center justify-center text-green-400">
                      <ArrowUp className="h-5 w-5"/>
                      <span>前話比 <span className="font-bold">+0.5ポイント</span></span>
                  </div>
              </div>
               <div className="mt-auto pt-4">
                 <p className="text-sm font-semibold text-cyan-400">キーインサイト:</p>
                 <p className="text-sm text-gray-300">過去の平均視聴率(3.5%)と比較して、今シーズンは非常に高い水準で推移。特に最終話にかけての盛り上がりが顕著で、続編制作の強い追い風となります。</p>
               </div>
            </Card>
          </div>
        </div>
      </main>
    </div>
  );
}