import * as React from 'react';
import { Box, Grid, Paper, Typography, Divider } from '@mui/material';
import { BarChart, LineChart, PieChart } from '@mui/x-charts';

const paperSx = {
  p: 2,
  borderRadius: 2,
  boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
  backgroundColor: '#fff',
};

const brand = {
  primary: '#40120E',   // espresso
  primary70: '#6A3A34', // lighter espresso
  sand: '#DFCCBC',      // light sand
  sand70: '#CDB7A4',    // mid sand
  sand50: '#BCA693',    // darker sand
  text: '#40120E',
  subtle: 'rgba(0,0,0,0.38)',
  divider: 'rgba(0,0,0,0.08)',
};

export default function Dashboard() {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
  const revenue = [42, 55, 48, 61, 70, 78]; // $k
  const orders = [180, 210, 195, 240, 260, 300];

  const categories = [
    { label: 'Furniture', value: 38 },
    { label: 'Lighting', value: 18 },
    { label: 'Textiles', value: 14 },
    { label: 'Decorative', value: 12 },
    { label: 'Kitchen & Dining', value: 10 },
    { label: 'Outdoor', value: 8 },
  ];

  const topProducts = [
    { label: 'Sofa Roma', value: 24 },
    { label: 'Lamp Venezia', value: 18 },
    { label: 'Rug Milano', value: 15 },
    { label: 'Table Firenze', value: 12 },
    { label: 'Chair Torino', value: 9 },
  ];

  return (
    <Box sx={{ p: 3 }}>
      <Grid container spacing={2} sx={{ mb: 2 }}>
        <Grid item xs={12} md={3}>
          <Paper sx={paperSx}>
            <Typography variant="subtitle2" sx={{ color: brand.subtle }}>Revenue (Last 30d)</Typography>
            <Typography variant="h4" sx={{ color: brand.text }}>$ 312k</Typography>
            <Typography variant="caption" sx={{ color: '#2e7d32' }}>+8.4% vs prev.</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} md={3}>
          <Paper sx={paperSx}>
            <Typography variant="subtitle2" sx={{ color: brand.subtle }}>Orders</Typography>
            <Typography variant="h4" sx={{ color: brand.text }}>1,385</Typography>
            <Typography variant="caption" sx={{ color: '#2e7d32' }}>+6.1% vs prev.</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} md={3}>
          <Paper sx={paperSx}>
            <Typography variant="subtitle2" sx={{ color: brand.subtle }}>Avg. Order Value</Typography>
            <Typography variant="h4" sx={{ color: brand.text }}>$ 225</Typography>
            <Typography variant="caption" sx={{ color: brand.subtle }}>stable</Typography>
          </Paper>
        </Grid>
        <Grid item xs={12} md={3}>
          <Paper sx={paperSx}>
            <Typography variant="subtitle2" sx={{ color: brand.subtle }}>Returning Customers</Typography>
            <Typography variant="h4" sx={{ color: brand.text }}>42%</Typography>
            <Typography variant="caption" sx={{ color: '#2e7d32' }}>+2.0 pts</Typography>
          </Paper>
        </Grid>
      </Grid>

      <Grid container spacing={2}>
        <Grid item xs={12} md={8}>
          <Paper sx={paperSx}>
            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Revenue & Orders</Typography>
            <Divider sx={{ mb: 2, borderColor: brand.divider }} />
            <LineChart
              xAxis={[{ scaleType: 'point', data: months }]}
              series={[
                { data: revenue, label: 'Revenue ($k)', curve: 'catmullRom', color: brand.primary },
                { data: orders, label: 'Orders', curve: 'catmullRom', yAxisKey: 'right', color: brand.sand50 },
              ]}
              yAxis={[
                { tickLabelStyle: { fill: brand.subtle } },
                { id: 'right', position: 'right', tickLabelStyle: { fill: brand.subtle } },
              ]}
              height={300}
              // Optional: light grid color
              grid={{ horizontal: true, vertical: false }}
              sx={{
                '& .MuiChartsAxis-line': { stroke: brand.divider },
                '& .MuiChartsAxis-tick': { stroke: brand.divider },
              }}
            />
          </Paper>
        </Grid>

        <Grid item xs={12} md={4}>
          <Paper sx={paperSx}>
            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Sales by Category</Typography>
            <Divider sx={{ mb: 2, borderColor: brand.divider }} />
            <PieChart
              series={[
                {
                  data: categories.map((c, i) => ({
                    id: i,
                    value: c.value,
                    label: c.label,
                    color: [
                      brand.primary,
                      brand.primary70,
                      brand.sand50,
                      brand.sand70,
                      '#8E6E5E', // complementary brown
                      '#A68979', // warm accent
                    ][i],
                  })),
                  innerRadius: 30,
                  paddingAngle: 2,
                },
              ]}
              height={300}
            />
          </Paper>
        </Grid>

        <Grid item xs={12}>
          <Paper sx={paperSx}>
            <Typography variant="h6" sx={{ mb: 1, color: brand.text }}>Top Products</Typography>
            <Divider sx={{ mb: 2, borderColor: brand.divider }} />
            <BarChart
              xAxis={[{ scaleType: 'band', data: topProducts.map(p => p.label) }]}
              series={[
                {
                  data: topProducts.map(p => p.value),
                  label: 'Units',
                  color: brand.primary,
                },
              ]}
              height={300}
              grid={{ horizontal: true, vertical: false }}
              sx={{
                '& .MuiChartsAxis-line': { stroke: brand.divider },
                '& .MuiChartsAxis-tick': { stroke: brand.divider },
                '& .MuiChartsLegend-root': { display: 'none' },
              }}
            />
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
}