import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

// ダミーデータ
const satisfactionData = [
  { name: '非常に満足', value: 35 },
  { name: '満足', value: 40 },
  { name: '普通', value: 15 },
  { name: '不満', value: 7 },
  { name: '非常に不満', value: 3 },
];

const monthlyData = [
  { month: '1月', 回答数: 120 },
  { month: '2月', 回答数: 190 },
  { month: '3月', 回答数: 150 },
  { month: '4月', 回答数: 280 },
  { month: '5月', 回答数: 320 },
  { month: '6月', 回答数: 250 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

export default function ChartDemo() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4 md:px-8">
        <h2 className="text-3xl font-bold text-center mb-16 text-gray-800">リアルタイムデータ分析</h2>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 円グラフ */}
          <div className="bg-white p-6 rounded-xl shadow-lg">
            <h3 className="text-xl font-semibold mb-6 text-gray-700">顧客満足度分析</h3>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={satisfactionData}
                    cx="50%"
                    cy="50%"
                    labelLine={false}
                    outerRadius={120}
                    fill="#8884d8"
                    dataKey="value"
                    label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  >
                    {satisfactionData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>
          
          {/* 棒グラフ */}
          <div className="bg-white p-6 rounded-xl shadow-lg">
            <h3 className="text-xl font-semibold mb-6 text-gray-700">月間回答数推移</h3>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={monthlyData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="回答数" fill="#8884d8" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>
        
        <div className="mt-12 text-center">
          <p className="text-gray-700 max-w-2xl mx-auto">
            収集したデータはリアルタイムで分析され、グラフ形式で視覚化されます。
            PNG画像としてエクスポートすることも可能です。
          </p>
        </div>
      </div>
    </section>
  );
}