"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { ApexOptions } from "apexcharts";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export default function SupervisorData() {
  const [startDate, setStartDate] = useState("2025-10-09");
  const [endDate, setEndDate] = useState("2025-10-09");

  // ✅ Chart config with proper ApexOptions typing
  const chartOptions: ApexOptions = {
    chart: {
      type: "bar",
      toolbar: { show: false },
    },
    plotOptions: {
      bar: {
        borderRadius: 4,
        horizontal: false,
        columnWidth: "45%",
      },
    },
    dataLabels: { enabled: true },
    xaxis: {
      categories: [
        "ITWASUM POLRI",
        "BAINTELKAM POLRI",
        "BAHARKAM POLRI",
        "BARESKRIM POLRI",
        "LEMDIKLAT POLRI",
        "KORBRIMOB POLRI",
        "STAMAOPS POLRI",
      ],
      labels: {
        rotate: -45,
        style: { fontSize: "11px" },
      },
    },
    yaxis: {
      title: { text: "Total Konten" },
    },
    grid: { strokeDashArray: 4 },
    responsive: [
      {
        breakpoint: 768,
        options: {
          plotOptions: {
            bar: {
              columnWidth: "60%",
            },
          },
          xaxis: {
            labels: { rotate: -30, style: { fontSize: "9px" } },
          },
          dataLabels: { enabled: false },
        },
      },
    ],
  };

  const chartDataSatker = [
    {
      name: "Total Konten",
      data: [9, 8, 7, 6, 5, 4, 3],
    },
  ];

  const chartDataMedia = [
    {
      name: "Total Konten",
      data: [9, 8, 7, 6, 5, 4],
    },
  ];

  const chartOptionsMedia: ApexOptions = {
    ...chartOptions,
    xaxis: {
      categories: [
        "Media Online",
        "Media Sosial",
        "Videotron",
        "Radio Polri",
        "TV Polri",
        "Majalah Digital",
      ],
      labels: {
        rotate: -45,
        style: { fontSize: "11px" },
      },
    },
  };

  return (
    <div className="space-y-6">
      {/* === Satker Terbanyak Membuat Konten === */}
      <Card className="shadow-sm">
        <CardContent className="p-4 sm:p-6">
          <h3 className="text-base sm:text-lg font-semibold mb-4">
            Satker Terbanyak Membuat Konten
          </h3>

          {/* ✅ Responsive date inputs */}
          <div className="flex flex-col sm:flex-row gap-4 mb-4">
            <div className="flex flex-col w-full sm:w-auto">
              <Label htmlFor="startDate" className="text-sm font-medium mb-1">
                Start Date
              </Label>
              <Input
                id="startDate"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="w-full sm:w-[180px]"
              />
            </div>
            <div className="flex flex-col w-full sm:w-auto">
              <Label htmlFor="endDate" className="text-sm font-medium mb-1">
                End Date
              </Label>
              <Input
                id="endDate"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="w-full sm:w-[180px]"
              />
            </div>
          </div>

          {/* ✅ Chart container with responsive width */}
          <div className="w-full overflow-x-auto">
            <div className="min-w-[350px]">
              <Chart
                options={chartOptions}
                series={chartDataSatker}
                type="bar"
                height={250}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      {/* === Jenis Media Terbanyak === */}
      <Card className="shadow-sm">
        <CardContent className="p-4 sm:p-6">
          <h3 className="text-base sm:text-lg font-semibold mb-4">
            Jenis Media Terbanyak
          </h3>

          <div className="flex flex-col sm:flex-row gap-4 mb-4">
            <div className="flex flex-col w-full sm:w-auto">
              <Label htmlFor="startDate2" className="text-sm font-medium mb-1">
                Start Date
              </Label>
              <Input
                id="startDate2"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
                className="w-full sm:w-[180px]"
              />
            </div>
            <div className="flex flex-col w-full sm:w-auto">
              <Label htmlFor="endDate2" className="text-sm font-medium mb-1">
                End Date
              </Label>
              <Input
                id="endDate2"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
                className="w-full sm:w-[180px]"
              />
            </div>
          </div>

          <div className="w-full overflow-x-auto">
            <div className="min-w-[350px]">
              <Chart
                options={chartOptionsMedia}
                series={chartDataMedia}
                type="bar"
                height={250}
              />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}