'use client';

import { useState, useEffect } from 'react';
import {
  Box,
  Container,
  Typography,
  Card,
  CardContent,
  Grid,
} from '@mui/material';
import {
  PieChart as PieChartIcon,
  ShowChart as ShowChartIcon,
  Payments,
  People,
} from '@mui/icons-material';
import {
  Chart as ChartJS,
  ArcElement,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Pie, Line } from 'react-chartjs-2';
import Header from '@/shared/ui/Header';
import {
  cardStyles,
  colors,
  responsiveText,
} from '@/shared/lib/button-styles';

// Chart.js 등록
ChartJS.register(
  ArcElement,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// Mock 데이터
const mockAnalyticsData = {
  summary: {
    participants: 128,
    participantsDelta: 12,
    totalCost: 300000,
    expectedRevenue: 1350000,
    roi: 450,
    targetRoi: 300,
  },
  channelPerformance: [
    { channel: '우리동네TV', participants: 58, percentage: 45, color: '#F472B6' },
    { channel: '링고비즈', participants: 38, percentage: 30, color: '#60A5FA' },
    { channel: 'SNS', participants: 32, percentage: 25, color: '#FB923C' },
  ],
  timePerformance: {
    peakTime: '오후 2-4시',
    peakParticipants: 35,
    avgPerHour: 8,
  },
  roiDetail: {
    totalCost: 300000,
    prizeCost: 250000,
    channelCost: 50000,
    expectedRevenue: 1350000,
    salesIncrease: 1000000,
    newCustomerLTV: 350000,
  },
  participantProfile: {
    age: [
      { label: '20대', percentage: 35 },
      { label: '30대', percentage: 40 },
      { label: '40대', percentage: 25 },
    ],
    gender: [
      { label: '여성', percentage: 60 },
      { label: '남성', percentage: 40 },
    ],
  },
};

export default function AnalyticsPage() {
  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
  const [updateText, setUpdateText] = useState('방금 전');

  useEffect(() => {
    // 업데이트 시간 표시 갱신
    const updateInterval = setInterval(() => {
      const now = new Date();
      const diff = Math.floor((now.getTime() - lastUpdate.getTime()) / 1000);

      let text;
      if (diff < 60) {
        text = '방금 전';
      } else if (diff < 3600) {
        text = `${Math.floor(diff / 60)}분 전`;
      } else {
        text = `${Math.floor(diff / 3600)}시간 전`;
      }

      setUpdateText(text);
    }, 30000); // 30초마다 갱신

    // 5분마다 데이터 업데이트 시뮬레이션
    const dataUpdateInterval = setInterval(() => {
      setLastUpdate(new Date());
      setUpdateText('방금 전');
    }, 300000); // 5분

    return () => {
      clearInterval(updateInterval);
      clearInterval(dataUpdateInterval);
    };
  }, [lastUpdate]);

  const { summary, channelPerformance, timePerformance, roiDetail, participantProfile } =
    mockAnalyticsData;

  return (
    <>
      <Header title="성과 분석" showBack={true} showMenu={false} showProfile={true} />
      <Box
        sx={{
          pt: { xs: 7, sm: 8 },
          pb: 10,
          bgcolor: colors.gray[50],
          minHeight: '100vh',
        }}
      >
        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
        {/* Title with Real-time Indicator */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            mb: 10,
          }}
        >
          <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
            📊 요약 (실시간)
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Box
              sx={{
                width: 8,
                height: 8,
                borderRadius: '50%',
                bgcolor: colors.mint,
                animation: 'pulse 2s infinite',
                '@keyframes pulse': {
                  '0%, 100%': { opacity: 1 },
                  '50%': { opacity: 0.3 },
                },
              }}
            />
            <Typography variant="caption" sx={{ ...responsiveText.body2 }}>
              {updateText}
            </Typography>
          </Box>
        </Box>

        {/* Summary KPI Cards */}
        <Grid container spacing={6} sx={{ mb: 10 }}>
          <Grid item xs={6} md={3}>
            <Card
              elevation={0}
              sx={{
                ...cardStyles.default,
                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
                borderColor: 'transparent',
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
                <Typography
                  variant="body2"
                  sx={{
                    mb: 2,
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontWeight: 500,
                    fontSize: '1rem',
                  }}
                >
                  참여자 수
                </Typography>
                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
                  {summary.participants}
                </Typography>
                <Typography
                  variant="caption"
                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
                >
                  ↑ {summary.participantsDelta}명 (오늘)
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={6} md={3}>
            <Card
              elevation={0}
              sx={{
                ...cardStyles.default,
                background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
                borderColor: 'transparent',
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
                <Typography
                  variant="body2"
                  sx={{
                    mb: 2,
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontWeight: 500,
                    fontSize: '1rem',
                  }}
                >
                  총 비용
                </Typography>
                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
                  {Math.floor(summary.totalCost / 10000)}만
                </Typography>
                <Typography
                  variant="caption"
                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
                >
                  경품 {Math.floor(roiDetail.prizeCost / 10000)}만 + 채널{' '}
                  {Math.floor(roiDetail.channelCost / 10000)}만
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={6} md={3}>
            <Card
              elevation={0}
              sx={{
                ...cardStyles.default,
                background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
                borderColor: 'transparent',
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
                <Typography
                  variant="body2"
                  sx={{
                    mb: 2,
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontWeight: 500,
                    fontSize: '1rem',
                  }}
                >
                  예상 수익
                </Typography>
                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
                  {Math.floor(summary.expectedRevenue / 10000)}만
                </Typography>
                <Typography
                  variant="caption"
                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
                >
                  매출 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
                  {Math.floor(roiDetail.newCustomerLTV / 10000)}만
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={6} md={3}>
            <Card
              elevation={0}
              sx={{
                ...cardStyles.default,
                background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
                borderColor: 'transparent',
              }}
            >
              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
                <Typography
                  variant="body2"
                  sx={{
                    mb: 2,
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontWeight: 500,
                    fontSize: '1rem',
                  }}
                >
                  투자대비수익률
                </Typography>
                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
                  {summary.roi}%
                </Typography>
                <Typography
                  variant="caption"
                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
                >
                  목표 {summary.targetRoi}% 달성
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>

        {/* Charts Grid */}
        <Grid container spacing={6} sx={{ mb: 10 }}>
          {/* Channel Performance */}
          <Grid item xs={12} md={6}>
            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
                  <Box
                    sx={{
                      width: 40,
                      height: 40,
                      borderRadius: '12px',
                      background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <PieChartIcon sx={{ fontSize: 24, color: 'white' }} />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
                    채널별 성과
                  </Typography>
                </Box>

                {/* Pie Chart */}
                <Box
                  sx={{
                    width: '100%',
                    maxWidth: 300,
                    mx: 'auto',
                    mb: 3,
                    flex: 1,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <Pie
                    data={{
                      labels: channelPerformance.map((item) => item.channel),
                      datasets: [
                        {
                          data: channelPerformance.map((item) => item.participants),
                          backgroundColor: channelPerformance.map((item) => item.color),
                          borderColor: '#fff',
                          borderWidth: 2,
                        },
                      ],
                    }}
                    options={{
                      responsive: true,
                      maintainAspectRatio: true,
                      plugins: {
                        legend: {
                          display: false,
                        },
                        tooltip: {
                          callbacks: {
                            label: function (context) {
                              const label = context.label || '';
                              const value = context.parsed || 0;
                              const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0);
                              const percentage = ((value / total) * 100).toFixed(1);
                              return `${label}: ${value}명 (${percentage}%)`;
                            },
                          },
                        },
                      },
                    }}
                  />
                </Box>

                {/* Legend */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                  {channelPerformance.map((item) => (
                    <Box
                      key={item.channel}
                      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
                    >
                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <Box
                          sx={{
                            width: 12,
                            height: 12,
                            borderRadius: '50%',
                            bgcolor: item.color,
                          }}
                        />
                        <Typography variant="body2" sx={{ color: colors.gray[700] }}>
                          {item.channel}
                        </Typography>
                      </Box>
                      <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
                        {item.percentage}% ({item.participants}명)
                      </Typography>
                    </Box>
                  ))}
                </Box>
              </CardContent>
            </Card>
          </Grid>

          {/* Time Trend */}
          <Grid item xs={12} md={6}>
            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
                  <Box
                    sx={{
                      width: 40,
                      height: 40,
                      borderRadius: '12px',
                      background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <ShowChartIcon sx={{ fontSize: 24, color: 'white' }} />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
                    시간대별 참여 추이
                  </Typography>
                </Box>

                {/* Line Chart */}
                <Box
                  sx={{
                    width: '100%',
                    mb: 3,
                    flex: 1,
                    display: 'flex',
                    alignItems: 'center',
                    minHeight: 200,
                  }}
                >
                  <Line
                    data={{
                      labels: [
                        '00시',
                        '03시',
                        '06시',
                        '09시',
                        '12시',
                        '15시',
                        '18시',
                        '21시',
                      ],
                      datasets: [
                        {
                          label: '참여자 수',
                          data: [3, 2, 5, 12, 28, 35, 22, 15],
                          borderColor: colors.blue,
                          backgroundColor: `${colors.blue}33`,
                          fill: true,
                          tension: 0.4,
                          pointBackgroundColor: colors.blue,
                          pointBorderColor: '#fff',
                          pointBorderWidth: 2,
                          pointRadius: 4,
                          pointHoverRadius: 6,
                        },
                      ],
                    }}
                    options={{
                      responsive: true,
                      maintainAspectRatio: false,
                      plugins: {
                        legend: {
                          display: false,
                        },
                        tooltip: {
                          backgroundColor: colors.gray[900],
                          padding: 12,
                          displayColors: false,
                          callbacks: {
                            label: function (context) {
                              return `${context.parsed.y}명`;
                            },
                          },
                        },
                      },
                      scales: {
                        y: {
                          beginAtZero: true,
                          ticks: {
                            color: colors.gray[600],
                          },
                          grid: {
                            color: colors.gray[200],
                          },
                        },
                        x: {
                          ticks: {
                            color: colors.gray[600],
                          },
                          grid: {
                            display: false,
                          },
                        },
                      },
                    }}
                  />
                </Box>

                {/* Stats */}
                <Box>
                  <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600] }}>
                    피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
                  </Typography>
                  <Typography variant="body2" sx={{ color: colors.gray[600] }}>
                    평균 시간당: {timePerformance.avgPerHour}명
                  </Typography>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        </Grid>

        {/* ROI Detail & Participant Profile */}
        <Grid container spacing={6}>
          {/* ROI Detail */}
          <Grid item xs={12} md={6}>
            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
                  <Box
                    sx={{
                      width: 40,
                      height: 40,
                      borderRadius: '12px',
                      background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Payments sx={{ fontSize: 24, color: 'white' }} />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
                    투자대비수익률 상세
                  </Typography>
                </Box>

                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  <Box>
                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
                      총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
                    </Typography>
                    <Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
                          • 경품 비용
                        </Typography>
                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
                          {Math.floor(roiDetail.prizeCost / 10000)}만원
                        </Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
                          • 채널 비용
                        </Typography>
                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
                          {Math.floor(roiDetail.channelCost / 10000)}만원
                        </Typography>
                      </Box>
                    </Box>
                  </Box>

                  <Box>
                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
                      예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
                    </Typography>
                    <Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
                          • 매출 증가
                        </Typography>
                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
                          {Math.floor(roiDetail.salesIncrease / 10000)}만원
                        </Typography>
                      </Box>
                      <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
                          • 신규 고객 LTV
                        </Typography>
                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
                          {Math.floor(roiDetail.newCustomerLTV / 10000)}만원
                        </Typography>
                      </Box>
                    </Box>
                  </Box>

                  <Box>
                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.mint }}>
                      투자대비수익률
                    </Typography>
                    <Box
                      sx={{
                        p: 2.5,
                        bgcolor: colors.gray[100],
                        borderRadius: 2,
                        textAlign: 'center',
                      }}
                    >
                      <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700] }}>
                        (수익 - 비용) ÷ 비용 × 100
                      </Typography>
                      <Typography variant="body2" sx={{ mb: 1.5, color: colors.gray[600] }}>
                        ({Math.floor(roiDetail.expectedRevenue / 10000)}만 -{' '}
                        {Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
                        {Math.floor(roiDetail.totalCost / 10000)}만 × 100
                      </Typography>
                      <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
                        = {summary.roi}%
                      </Typography>
                    </Box>
                  </Box>
                </Box>
              </CardContent>
            </Card>
          </Grid>

          {/* Participant Profile */}
          <Grid item xs={12} md={6}>
            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
                  <Box
                    sx={{
                      width: 40,
                      height: 40,
                      borderRadius: '12px',
                      background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <People sx={{ fontSize: 24, color: 'white' }} />
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
                    참여자 프로필
                  </Typography>
                </Box>

                {/* Age Distribution */}
                <Box sx={{ mb: 4 }}>
                  <Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
                    연령별
                  </Typography>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                    {participantProfile.age.map((item) => (
                      <Box key={item.label}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                          <Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
                            {item.label}
                          </Typography>
                          <Box
                            sx={{
                              flex: 1,
                              height: 28,
                              bgcolor: colors.gray[200],
                              borderRadius: 1.5,
                              overflow: 'hidden',
                            }}
                          >
                            <Box
                              sx={{
                                width: `${item.percentage}%`,
                                height: '100%',
                                background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'flex-end',
                                pr: 1.5,
                              }}
                            >
                              <Typography
                                variant="caption"
                                sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
                              >
                                {item.percentage}%
                              </Typography>
                            </Box>
                          </Box>
                        </Box>
                      </Box>
                    ))}
                  </Box>
                </Box>

                {/* Gender Distribution */}
                <Box>
                  <Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
                    성별
                  </Typography>
                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
                    {participantProfile.gender.map((item) => (
                      <Box key={item.label}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
                          <Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
                            {item.label}
                          </Typography>
                          <Box
                            sx={{
                              flex: 1,
                              height: 28,
                              bgcolor: colors.gray[200],
                              borderRadius: 1.5,
                              overflow: 'hidden',
                            }}
                          >
                            <Box
                              sx={{
                                width: `${item.percentage}%`,
                                height: '100%',
                                background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'flex-end',
                                pr: 1.5,
                              }}
                            >
                              <Typography
                                variant="caption"
                                sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
                              >
                                {item.percentage}%
                              </Typography>
                            </Box>
                          </Box>
                        </Box>
                      </Box>
                    ))}
                  </Box>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Container>
      </Box>
    </>
  );
}