import React from 'react';
import { Card, Container, Row, Col, Table, Badge } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

const App = () => {
  // TechCrunchの2025年3月13日のニュース記事データ
  const newsArticles = [
    {
      title: "Spotify launches a program to publish audiobooks from independent authors",
      time: "3分前",
      timeInMinutes: 3,
      url: "https://techcrunch.com/2025/03/13/spotify-launches-a-program-to-publish-audiobooks-from-independent-authors/",
      category: "メディア・エンターテイメント"
    },
    {
      title: "OpenAI calls for US government to codify 'fair use' for AI training",
      time: "33分前",
      timeInMinutes: 33,
      url: "https://techcrunch.com/2025/03/13/openai-calls-for-u-s-government-to-codify-fair-use-for-ai-training/",
      category: "AI・機械学習"
    },
    {
      title: "TechCrunch All Stage unveils a powerhouse agenda for founders",
      time: "56分前",
      timeInMinutes: 56,
      url: "https://techcrunch.com/2025/03/13/techcrunch-all-stage-unveils-a-powerhouse-agenda-for-founders/",
      category: "イベント"
    },
    {
      title: "Huawei's lobbying lands it in a bribery scandal with EU politicians",
      time: "58分前",
      timeInMinutes: 58,
      url: "https://techcrunch.com/2025/03/13/huaweis-lobbying-lands-it-in-a-bribery-scandal-with-eu-politicians/",
      category: "政治・規制"
    },
    {
      title: "UiPath is looking for a path to growth in agentic AI with its Peak.ai acquisition",
      time: "2時間前",
      timeInMinutes: 120,
      url: "https://techcrunch.com/2025/03/13/uipath-is-looking-for-a-path-to-growth-in-agentic-ai-with-its-peak-ai-acquisition/",
      category: "AI・機械学習"
    },
    {
      title: "Omni raises $69M to design tools that help companies better analyze their data",
      time: "2時間前",
      timeInMinutes: 120,
      url: "https://techcrunch.com/2025/03/13/omni-is-designing-tools-to-help-companies-make-data-driven-decisions/",
      category: "資金調達"
    },
    {
      title: "Skich launches an alternative app store on iOS in the EU",
      time: "2時間前",
      timeInMinutes: 120,
      url: "https://techcrunch.com/2025/03/13/skich-challenges-epic-games-with-an-alternative-app-store-on-ios-in-the-eu/",
      category: "モバイル"
    },
    {
      title: "ClickUp is launching a revamped calendar tool for task and meeting management",
      time: "2時間前",
      timeInMinutes: 120,
      url: "https://techcrunch.com/2025/03/13/clickup-is-launching-a-revamped-calendar-tool-for-task-and-meeting-management/",
      category: "生産性ツール"
    },
    {
      title: "Meta is launching Community Notes in the US next week",
      time: "3時間前",
      timeInMinutes: 180,
      url: "https://techcrunch.com/2025/03/13/meta-is-launching-community-notes-in-the-us-next-week/",
      category: "ソーシャルメディア"
    },
    {
      title: "Singapore grants bail for Nvidia chip smugglers in alleged $390M fraud",
      time: "4時間前",
      timeInMinutes: 240,
      url: "https://techcrunch.com/2025/03/13/singapore-grants-bail-for-nvidia-chip-smugglers-in-alleged-390m-fraud/",
      category: "法律・犯罪"
    },
    {
      title: "Bria lands new funding for AI models trained on licensed data",
      time: "4時間前",
      timeInMinutes: 240,
      url: "https://techcrunch.com/2025/03/13/bria-lands-new-funding-for-ai-models-trained-on-licensed-data/",
      category: "AI・機械学習"
    }
  ];

  // カテゴリー別の記事数を集計
  const categoryCount = newsArticles.reduce((acc, article) => {
    acc[article.category] = (acc[article.category] || 0) + 1;
    return acc;
  }, {});

  // 円グラフ用のデータ形式に変換
  const pieChartData = Object.keys(categoryCount).map(category => ({
    name: category,
    value: categoryCount[category]
  }));

  // 時間帯別の記事数を集計
  const timeRanges = [
    { name: '1時間以内', count: 0 },
    { name: '1-2時間', count: 0 },
    { name: '2-3時間', count: 0 },
    { name: '3-4時間', count: 0 },
    { name: '4時間以上', count: 0 }
  ];

  newsArticles.forEach(article => {
    if (article.timeInMinutes <= 60) {
      timeRanges[0].count++;
    } else if (article.timeInMinutes <= 120) {
      timeRanges[1].count++;
    } else if (article.timeInMinutes <= 180) {
      timeRanges[2].count++;
    } else if (article.timeInMinutes <= 240) {
      timeRanges[3].count++;
    } else {
      timeRanges[4].count++;
    }
  });

  // 円グラフの色
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d', '#ffc658', '#8dd1e1', '#a4de6c', '#d0ed57', '#83a6ed'];

  // 時間帯に応じた色分け関数
  const getTimeColor = (time) => {
    if (time.includes('分前')) {
      return 'success';
    } else if (time.includes('1時間前')) {
      return 'info';
    } else if (time.includes('2時間前')) {
      return 'primary';
    } else if (time.includes('3時間前')) {
      return 'warning';
    } else {
      return 'secondary';
    }
  };

  // カテゴリーに応じた色分け関数
  const getCategoryColor = (category) => {
    const categoryColors = {
      'AI・機械学習': 'primary',
      'メディア・エンターテイメント': 'success',
      'イベント': 'info',
      '政治・規制': 'danger',
      '資金調達': 'warning',
      'モバイル': 'dark',
      '生産性ツール': 'secondary',
      'ソーシャルメディア': 'info',
      '法律・犯罪': 'danger'
    };
    return categoryColors[category] || 'primary';
  };

  return (
    <Container className="py-4">
      <h1 className="text-center mb-4">TechCrunch 2025年3月13日のニュース分析</h1>
      
      <Row className="mb-4">
        <Col md={6}>
          <Card className="h-100 shadow">
            <Card.Header className="bg-primary text-white">
              <h5 className="mb-0">カテゴリー別記事数</h5>
            </Card.Header>
            <Card.Body>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={pieChartData}
                    cx="50%"
                    cy="50%"
                    labelLine={true}
                    label={({name, percent}) => `${name}: ${(percent * 100).toFixed(0)}%`}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {pieChartData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(value) => [`${value}件`, '記事数']} />
                </PieChart>
              </ResponsiveContainer>
            </Card.Body>
            <Card.Footer className="text-muted text-center">
              <small>出典: <a href="https://techcrunch.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TechCrunch</a></small>
            </Card.Footer>
          </Card>
        </Col>
        
        <Col md={6}>
          <Card className="h-100 shadow">
            <Card.Header className="bg-primary text-white">
              <h5 className="mb-0">時間帯別記事数</h5>
            </Card.Header>
            <Card.Body>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart
                  data={timeRanges}
                  margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip formatter={(value) => [`${value}件`, '記事数']} />
                  <Legend />
                  <Bar dataKey="count" name="記事数" fill="#8884d8" />
                </BarChart>
              </ResponsiveContainer>
            </Card.Body>
            <Card.Footer className="text-muted text-center">
              <small>出典: <a href="https://techcrunch.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TechCrunch</a></small>
            </Card.Footer>
          </Card>
        </Col>
      </Row>
      
      <Card className="shadow mb-4">
        <Card.Header className="bg-primary text-white">
          <h5 className="mb-0">TechCrunch 今日のニュース一覧 (2025年3月13日)</h5>
        </Card.Header>
        <Card.Body>
          <Table striped hover responsive>
            <thead>
              <tr>
                <th>#</th>
                <th>タイトル</th>
                <th>カテゴリー</th>
                <th>投稿時間</th>
                <th>リンク</th>
              </tr>
            </thead>
            <tbody>
              {newsArticles.map((article, index) => (
                <tr key={index}>
                  <td>{index + 1}</td>
                  <td>{article.title}</td>
                  <td>
                    <Badge bg={getCategoryColor(article.category)}>
                      {article.category}
                    </Badge>
                  </td>
                  <td>
                    <Badge bg={getTimeColor(article.time)}>
                      {article.time}
                    </Badge>
                  </td>
                  <td>
                    <a href={article.url} target="_blank" rel="noopener noreferrer" className="btn btn-sm btn-outline-primary">
                      記事を読む
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Card.Body>
        <Card.Footer className="text-muted">
          <div className="d-flex justify-content-between align-items-center">
            <small>合計: {newsArticles.length}件の記事</small>
            <small>出典: <a href="https://techcrunch.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TechCrunch</a></small>
          </div>
        </Card.Footer>
      </Card>
      
      <Card className="shadow">
        <Card.Header className="bg-primary text-white">
          <h5 className="mb-0">記事カテゴリー分布</h5>
        </Card.Header>
        <Card.Body>
          <Row>
            {Object.entries(categoryCount).map(([category, count], index) => (
              <Col md={4} sm={6} className="mb-3" key={index}>
                <Card className="h-100 border-0 shadow-sm">
                  <Card.Body className="text-center">
                    <h5>
                      <Badge bg={getCategoryColor(category)} className="w-100 py-2">
                        {category}
                      </Badge>
                    </h5>
                    <h2 className="mt-3">{count}</h2>
                    <p className="text-muted mb-0">記事</p>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Card.Body>
        <Card.Footer className="text-muted text-center">
          <small>出典: <a href="https://techcrunch.com/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">TechCrunch</a></small>
        </Card.Footer>
      </Card>
    </Container>
  );
};

export default App;