// @mui
import { useEffect, useState } from 'react';
import { 
  Button, 
  Container, 
  Grid, 
  styled, 
  Typography, 
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Card,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem, 
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Checkbox,
 
} from '@mui/material';
// hooks
import useSettings from '../hooks/useSettings';
// components
import { PieChart, Pie, Cell, Tooltip, BarChart, Bar, XAxis, YAxis, Legend, ResponsiveContainer } from 'recharts';
import Page from '../components/Page';
import axios from '../utils/axios';
import useAuth from '../hooks/useAuth';
import SomethingUsage from '../sections/dashboard/SomethingUsage';
import { fCurrency } from '../utils/formatNumber';
import dayjs from "dayjs";
import {DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { green, red } from "@mui/material/colors";
import MuiDialog from '@/components/MuiDialog';
import SearchIcon from "@mui/icons-material/Search";

// ----------------------------------------------------------------------
const COLORS = ['#229A16', '#919EAB', '#FF4842'];

// const performaDokterData = [
//   { name: 'Dr. John', Berhasil: 70, Gagal: 8, Abandon: 4 },
//   { name: 'Dr. Richard', Berhasil: 68, Gagal: 10, Abandon: 2 },
//   { name: 'Dr. Harman', Berhasil: 75, Gagal: 5, Abandon: 3 },
//   { name: 'Dr. Emma', Berhasil: 80, Gagal: 7, Abandon: 1 },
//   { name: 'Dr. tb', Berhasil: 80, Gagal: 7, Abandon: 1 },
//   { name: 'Dr. test', Berhasil: 80, Gagal: 7, Abandon: 1 },
//   { name: 'Dr. yayan', Berhasil: 80, Gagal: 7, Abandon: 1 },
//   { name: 'Dr. intan', Berhasil: 80, Gagal: 7, Abandon: 1 },
//   { name: 'Dr. fajri', Berhasil: 80, Gagal: 7, Abandon: 1 },
// ];

// Custom Tooltip
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    const totalPasien =
      payload[0].value + payload[1].value + payload[2].value;
    return (
      <div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
        <p>{label}</p>
        <p>Total Pasien: {totalPasien}</p>
        <p>Berhasil: {payload[0].value}</p>
        <p>Gagal: {payload[1].value}</p>
        <p>Abandon: {payload[2].value}</p>
      </div>
    );
  }
  return null;
};

// Custom Tooltip
const CustomTooltipPie = ({ active, payload, startDate, endDate }) => {
  if (!active || !payload || payload.length === 0) return null;
  // Fungsi format tanggal ke "2 Jan 2025"
  const formatDate = (date) => {
    if (!date) return "N/A";
    return new Date(date).toLocaleDateString("id-ID", {
      day: "numeric",
      month: "short",
      year: "numeric",
    });
  };
  return (
    <div style={{ background: "#000", color: "#fff", padding: "10px", borderRadius: "5px" }}>
       <p>{formatDate(startDate)} - {formatDate(endDate)}</p>
      <p>Status: {payload[0]?.name || "Tidak ada data"}</p>
      <p>Jumlah Pasien: {payload[0]?.value || 0}</p>
    </div>
  );
};



export default function Dashboard() {
  
const transaksiDataDefault = [
  { name: "Berhasil", value: 0, color: "#4CAF50" },
  { name: "Gagal", value: 0, color: "#F44336" },
  { name: "Abandon", value: 0, color: "#9E9E9E" },
];
  const { themeStretch } = useSettings();
  const [startDate, setStartDate] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
  const [endDate, setEndDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [startDateDokter, setStartDateDokter] = useState(dayjs().startOf('month').format('YYYY-MM-DD'));
  const [endDateDokter, setEndDateDokter] = useState(dayjs().format('YYYY-MM-DD'));
  const [transaksiData, setTransaksiData] = useState(transaksiDataDefault);
  const [transaksiDataBar, setTransaksiDataBar] = useState([]);
  const [type, setType] = useState(0);
  const [status, setStatus] = useState(0);
  const [statusDokter, setStatusDokter] = useState(0);
  const [view, setView] = useState(["day", "month", "year"]);
  const [performaDokterData, setListPerformaDoctors] = useState([]);
  const [doctors, setListDoctors] = useState([]);
  const [selectedDoctors, setSelectedDoctors] = useState(doctors.map((doctor) => doctor.id)); // State untuk dokter yang dipilih
  

  const fetchData = async () => {
    try {
      const response = await axios.get(`dashboard/transaksi`, {
        params: {
          start_date: startDate,
          end_date: endDate,
          type,
          status
        }
      });
      if (response.data) {
        setTransaksiData(response.data);
      }
      if (type === 0) {
        setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
      } else {
        setView(["month"]); // Hanya menampilkan bulan & tahun
      }
    } catch (error) {
      console.error('Error fetching transaksi data:', error);
    }
  };

  const fetchDataBar = async () => {
    try {
      const response = await axios.get(`dashboard/transaksi-bar-chart`, {
        params: {
          start_date: startDate,
          end_date: endDate,
          type,
          status
        }
      });
      if (response.data) {
        setTransaksiDataBar(response.data);
      }
      if (type === 0) {
        setView(["day", "month", "year"]); // Urutan yang benar: day, month, year
      } else {
        setView(["month"]); // Hanya menampilkan bulan & tahun
      }
    } catch (error) {
      console.error('Error fetching transaksi data:', error);
    }
  }

  const fetchListPerfomaDokter = async () => {
    try {
      const response = await axios.get(`dashboard/list-performa-dokter`, {
        params: {
          start_date: startDateDokter,
          end_date: endDateDokter,
          type,
          statusDokter,
          nIDDokter: selectedDoctors
        }
      } );
      if (response.data) {
        setListPerformaDoctors(response.data);
      }
    } catch (error) {
      console.error('Error fetching transaksi data:', error);
    }
  };

  
  const fetchListDokter = async () => {
    try {
      const response = await axios.get(`dashboard/list-dokter`);
      if (response.data) {
        setListDoctors(response.data);
      }
    } catch (error) {
      console.error('Error fetching transaksi data:', error);
    }
  };

  // Fetch data saat pertama kali halaman dimuat dan ketika filter berubah
  useEffect(() => {
    fetchData();
    fetchDataBar();
    // fetchListPerfomaDokter();
  }, [startDate, endDate, type, status]);

  // Fetch 
  useEffect(() => {
    fetchListPerfomaDokter();
  }, [selectedDoctors, startDateDokter, endDateDokter])

  useEffect(() => {
    fetchListDokter();
  }, []);

 
  // Performa dokter
  const [openDialog, setOpenDialog] = useState(false);
  const handleOpen = () => setOpenDialog(true);
 

  const getContent = () => {
    const [search, setSearch] = useState(""); // State untuk pencarian dokter

    // Filter dokter berdasarkan pencarian
    const filteredDoctors = doctors.filter((doctor) =>
      doctor.name.toLowerCase().includes(search.toLowerCase())
    );
  
    // Handle pilih satu dokter
    const handleSelectDoctor = (id) => {
      setSelectedDoctors((prev) =>
        prev.includes(id) ? prev.filter((docId) => docId !== id) : [...prev, id]
      );
    };
  
    // Handle pilih semua dokter
    const handleSelectAll = () => {
      if (selectedDoctors.length === doctors.length) {
        setSelectedDoctors([]);
      } else {
        setSelectedDoctors(doctors.map((doctor) => doctor.id));
      }
    };

    const handleCloseDialog = () => {
      setOpenDialog(false);
      setSelectedDoctors([]);
    }

    const handlePilihDokter = () => {
      setOpenDialog(false);
      console.log(selectedDoctors);
    }  
    return (
      <>
        {/* Search Bar */}
        <TextField 
          fullWidth
          variant="outlined"
          placeholder="Search Doctor"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          InputProps={{
            endAdornment: <SearchIcon />,
          }}
          sx={{ mb: 2, mt:2 }}
        />
  
        {/* Table Dokter */}
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>
                  <Checkbox
                    checked={selectedDoctors.length === doctors.length}
                    onChange={handleSelectAll}
                  />
                </TableCell>
                <TableCell>Kode</TableCell>
                <TableCell>Nama</TableCell>
                <TableCell>Status</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredDoctors.map((doctor) => (
                <TableRow key={doctor.id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedDoctors.includes(doctor.id)}
                      onChange={() => handleSelectDoctor(doctor.id)}
                    />
                  </TableCell>
                  <TableCell>{doctor.code}</TableCell>
                  <TableCell>{doctor.name}</TableCell>
                  <TableCell>
                    <Typography
                      sx={{
                        color: doctor.online === 1 ? green[500] : red[500],
                        fontWeight: "bold",
                      }}
                    >
                      {doctor.online === 1 ? "🟢 Online" : "🔴 Offline"}
                    </Typography>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        <DialogActions>
            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
                <Button color="primary"  variant="contained" onClick={handlePilihDokter}>Pilih</Button>
           
            
        </DialogActions>
      </>
    );
  };
  

  return (
    <Page title="Dashboard">
      <Container maxWidth="xl">
        <Typography variant="h3" component="h1" paragraph>
          Dashboard
        </Typography>

        {/* Jumlah Transaksi */}
        <Card sx={{ p: 3, mb: 3 }}>
          <Typography variant="h5" gutterBottom>
            Jumlah Transaksi
          </Typography>
          <Grid container spacing={3}>
            {/* Pilih */}
            <Grid item sm={3}>
              <FormControl fullWidth>
                <InputLabel>Tipe</InputLabel>
                <Select 
                value={type} 
                onChange={(e) => setType(e.target.value)}
                >
                  <MenuItem value="0">Harian</MenuItem>
                  <MenuItem value="1">Mingguan</MenuItem>
                  <MenuItem value="2">Bulanan</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item md={2}>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
                <DesktopDatePicker
                  label="Start"
                  views={view} 
                  value={startDate}
                  inputFormat="dd/MM/yyyy"
                  onChange={(value) => {
                    if (!value) return; // Hindari error jika value null atau undefined
                    if (type == 0) {
                      setStartDate(value);
                    } else {
                      setStartDate(new Date(value.getFullYear(), value.getMonth(), 1));
                    }
                  }}
                  renderInput={(params) => <TextField {...params} variant="outlined" />}
                />
              </LocalizationProvider>
            </Grid>
            <Grid item md={2}>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DesktopDatePicker
                label="End"
                views={view} 
                inputFormat="dd/MM/yyyy"
                value={endDate}
                onChange={(value) => {
                  if (!value) return; // Hindari error jika value null atau undefined
                  if (type == 0) {
                    setEndDate(value);
                  } else {
                    setEndDate(new Date(value.getFullYear(), value.getMonth(), 1));
                  }
                }}
                renderInput={(params) => <TextField {...params} variant="outlined" />}
              />
              </LocalizationProvider>
            </Grid>
            {/* Pilih Status */}
            <Grid item sm={3}>
              <FormControl fullWidth>
                <InputLabel>Status</InputLabel>
                <Select 
                  value={status} 
                  onChange={(e) => setStatus(e.target.value)}
                >
                  <MenuItem value="0">Semua</MenuItem>
                  <MenuItem value="1">Berhasil</MenuItem>
                  <MenuItem value="2">Abandon</MenuItem>
                  <MenuItem value="3">Gagal</MenuItem>
                </Select>

              </FormControl>
            </Grid>
            <Grid item xs={12} md={4}>
              <ResponsiveContainer width="100%" height={350}>
                <PieChart>
                  <Pie
                    data={transaksiData}
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    fill="#8884d8"
                    dataKey="value"
                    label={({ percent }) => `${(percent * 100).toFixed(0)}%`}
                  >
                    {transaksiData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={entry.color} />
                    ))}
                  </Pie>
                  <Tooltip content={<CustomTooltipPie startDate={startDate} endDate={endDate} />} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </Grid>
            <Grid item xs={12} md={8}>
              <div style={{ width: "100%", overflowX: "auto" }}>
                <ResponsiveContainer width={1000} height={350}>
                  <BarChart
                    data={transaksiDataBar}
                    margin={{ top: 10, right: 30, left: 10, bottom: 10 }}
                  >
                    <XAxis
                      dataKey="date"
                      tickFormatter={(date) => date}
                    />
                    <YAxis />
                    <Tooltip content={<CustomTooltip />} />
                    <Legend />
                    <Bar dataKey="Berhasil" fill="#4CAF50" barSize={20} />
                    <Bar dataKey="Gagal" fill="#F44336" barSize={20} />
                    <Bar dataKey="Abandon" fill="#9E9E9E" barSize={20} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </Grid>
          </Grid>
        </Card>

        {/* Performa Dokter */}
        <Card sx={{ p: 3 }}>
          <Typography variant="h5" gutterBottom>
            Performa Dokter
          </Typography>
          <Grid container spacing={3}>
            {/* Pilih Dokter*/}
            <Grid item sm={3}>
              <Button variant="contained" onClick={handleOpen}>
                Pilih Dokter
              </Button>
            </Grid>
            {/* Pilih */}
            <Grid item sm={3}>
              <FormControl fullWidth>
                <InputLabel>Tipe</InputLabel>
                <Select 
                value={type} 
                onChange={(e) => setType(e.target.value)}
                >
                  <MenuItem value="0">Harian</MenuItem>
                  <MenuItem value="1">Mingguan</MenuItem>
                  <MenuItem value="2">Bulanan</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item md={2}>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
                <DesktopDatePicker
                  label="Start"
                  views={view} 
                  value={startDateDokter}
                  inputFormat="dd/MM/yyyy"
                  onChange={(value) => {
                    if (!value) return; // Hindari error jika value null atau undefined
                    if (type == 0) {
                      setStartDateDokter(value);
                    } else {
                      setStartDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
                    }
                  }}
                  renderInput={(params) => <TextField {...params} variant="outlined" />}
                />
              </LocalizationProvider>
            </Grid>
            <Grid item md={2}>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DesktopDatePicker
                label="End"
                views={view} 
                inputFormat="dd/MM/yyyy"
                value={endDateDokter}
                onChange={(value) => {
                  if (!value) return; // Hindari error jika value null atau undefined
                  if (type == 0) {
                    setEndDateDokter(value);
                  } else {
                    setEndDateDokter(new Date(value.getFullYear(), value.getMonth(), 1));
                  }
                }}
                renderInput={(params) => <TextField {...params} variant="outlined" />}
              />
              </LocalizationProvider>
            </Grid>
            {/* Pilih Status */}
            <Grid item sm={2}>
              <FormControl fullWidth>
                <InputLabel>Status</InputLabel>
                <Select 
                  value={statusDokter} 
                  onChange={(e) => setStatusDokter(e.target.value)}
                >
                  <MenuItem value="0">Semua</MenuItem>
                  <MenuItem value="1">Berhasil</MenuItem>
                  <MenuItem value="2">Abandon</MenuItem>
                  <MenuItem value="3">Gagal</MenuItem>
                </Select>

              </FormControl>
            </Grid>
            <Grid item sm={12} marginTop={2}>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={performaDokterData}>
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="Berhasil" fill="#4CAF50" />
                  <Bar dataKey="Gagal" fill="#F44336" />
                  <Bar dataKey="Abandon" fill="#9E9E9E" />
                </BarChart>
              </ResponsiveContainer>
            </Grid>
          </Grid>

          {/* Dialog Pilih Dokter */}
          <MuiDialog
            title={{name: "Pilih Dokter"}}
            openDialog={openDialog}
            setOpenDialog={setOpenDialog}
            content={getContent()}
            maxWidth="xl"
          />
          
        </Card>
      </Container>
    </Page>
  );
}