import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, Link } from "@inertiajs/react";
import React from "react";
import { useState } from "react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    BadgeCheck,
    ChevronLeft,
    ChevronRight,
    ChevronUp,
    Download,
    FileText,
    Search,
    Upload,
} from "lucide-react";

import Select from "react-select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface SKLData {
    no: number;
    namaPerusahaan: string;
    tahun: number;
    periodePelaporan: string;
    skl: number;
    spbm: number;
    hasil: {
        il: string;
        al: string;
        lb3: string;
        sb: string;
        bs: string;
        stb: string;
        lp: string;
        kdm: string;
    };
    stt: string;
    se: string;
}

export default function PelaporanIndex() {
    const [year, setYear] = useState<string>("2025");
    const [quarter, setQuarter] = useState<string>("Triwulan 1");
    // const [company, setCompany] = useState<string>("PT Ajinomoto Indonesia");

    const companyOptions = [
        { value: "PT Ajinomoto Indonesia", label: "PT Ajinomoto Indonesia" },
        { value: "PT Unilever Indonesia", label: "PT Unilever Indonesia" },
        {
            value: "PT Indofood Sukses Makmur",
            label: "PT Indofood Sukses Makmur",
        },
        { value: "PT Mayora Indah", label: "PT Mayora Indah" },
    ];

    const [company, setCompany] = useState<{
        value: string;
        label: string;
    } | null>(companyOptions[0]);
    // Color coding helper
    const getStatusColor = (status: string) => {
        switch (status) {
            case "belum":
                return "bg-red-100 text-red-800";
            case "pending":
                return "bg-gray-100 text-gray-800";
            case "siap":
                return "bg-orange-100 text-orange-800";
            case "selesai":
                return "bg-green-100 text-green-800";
            default:
                return "";
        }
    };
    return (
        <AuthenticatedLayout header={"Pelaporan SKL"}>
            <Head title="Pelaporan SKL" />

            <div className="p-8">
                {/* Filter Section */}
                <div className="bg-white rounded-lg shadow-sm mb-6">
                    <Card className="shadow-md border-slate-200 justify-between">
                        <CardHeader className="pb-3">
                            <CardTitle className="text-lg font-medium">
                                Pelaporan SKL
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
                                <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center w-full">
                                    <Select
                                        options={companyOptions}
                                        value={company}
                                        onChange={setCompany}
                                        placeholder="Pilih Perusahaan"
                                        isSearchable
                                        className="w-full sm:w-[300px]"
                                    />

                                    <div className="flex gap-4 w-full sm:w-auto">
                                        <Input
                                            type="number"
                                            value={year}
                                            onChange={(e) =>
                                                setYear(e.target.value)
                                            }
                                            className="w-full sm:w-24"
                                        />

                                        <Select
                                            options={[
                                                {
                                                    value: "Triwulan 1",
                                                    label: "Triwulan 1",
                                                },
                                                {
                                                    value: "Triwulan 2",
                                                    label: "Triwulan 2",
                                                },
                                                {
                                                    value: "Triwulan 3",
                                                    label: "Triwulan 3",
                                                },
                                                {
                                                    value: "Triwulan 4",
                                                    label: "Triwulan 4",
                                                },
                                            ]}
                                            value={{
                                                value: quarter,
                                                label: quarter,
                                            }}
                                            onChange={(newValue) =>
                                                setQuarter(
                                                    newValue?.value ||
                                                        "Triwulan 1"
                                                )
                                            }
                                            placeholder="Pilih Periode"
                                            className="w-full sm:w-[150px]"
                                        />
                                    </div>

                                    <Button className="w-full sm:w-auto">
                                        <Search className="w-4 h-4 mr-2" />
                                        Cari
                                    </Button>
                                </div>

                                {/* <div className="flex gap-2">
                            <Button variant="outline">
                                <Upload className="w-4 h-4 mr-2" />
                                Import
                            </Button>
                            <Button variant="outline">
                                <Download className="w-4 h-4 mr-2" />
                                Export
                            </Button>
                            <Button variant="outline">
                                <FileText className="w-4 h-4 mr-2" />
                                Template
                            </Button>
                        </div> */}
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Table Section */}
                <div className="w-full overflow-x-auto">
                    <Table className="min-w-[1000px] border-collapse">
                        <TableHeader>
                            <TableRow className="border-b border-t bg-green-800">
                                <TableHead
                                    rowSpan={2}
                                    className="w-[50px] border-r border-l text-white"
                                >
                                    No.
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    Nama Perusahaan
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    Tahun
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    Periode Pelaporan
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    SKL (%)
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    SPBM (%)
                                </TableHead>
                                <TableHead
                                    className="border-r text-center text-white"
                                    colSpan={8}
                                >
                                    Hasil (Nilai SKL)
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    STT
                                </TableHead>
                                <TableHead
                                    rowSpan={2}
                                    className="border-r text-center text-white"
                                >
                                    SE
                                </TableHead>
                            </TableRow>
                            <TableRow className="border-b bg-green-600">
                                <TableHead className="text-center border-r text-white">
                                    IL
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    AL
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    LB3
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    SB
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    BS
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    STB
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    LP
                                </TableHead>
                                <TableHead className="text-center border-r text-white">
                                    KDM
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody className="border-b">
                            <TableRow className="border-b">
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    1
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    PT Ajinomoto Indonesia
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    2023
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    Triwulan 2 / Semester 1
                                </TableCell>

                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l "
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
                                >
                                    00.00
                                </TableCell>

                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
                                >
                                    <Link href="/admin/pelaporan/al">
                                        00.00
                                    </Link>
                                </TableCell>

                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-red-100 text-red-700"
                                >
                                    00.00
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-gray-100 text-gray-700"
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-gray-100 text-gray-700"
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-orange-100 text-orange-700"
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-green-100 text-green-700"
                                >
                                    76.70
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center hover:underline text-muted-foreground border-r border-l bg-green-100 text-green-700"
                                >
                                    76.70
                                </TableCell>

                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    <FileText className="w-4 h-4" />
                                </TableCell>
                                <TableCell
                                    colSpan={1}
                                    className="text-center text-muted-foreground border-r border-l"
                                >
                                    <FileText className="w-4 h-4" />
                                </TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </div>
                {/* Pagination */}
                {/* <div className="mt-4 flex items-center gap-2 justify-end">
                    <Button variant="outline" size="icon">
                        <ChevronLeft className="h-4 w-4" />
                    </Button>
                    <Button variant="outline" size="icon">
                        <ChevronRight className="h-4 w-4" />
                    </Button>
                </div> */}

                {/* Legend Section */}
                <div className="mt-6 flex flex-col md:grid md:grid-cols-2 gap-6">
                    {/* Keterangan Section */}
                    <div className="bg-white rounded-lg shadow-sm border p-4 md:p-6">
                        <div className="flex items-center gap-2 mb-4">
                            <FileText className="w-5 h-5 text-green-600" />
                            <h3 className="font-semibold text-lg">
                                Keterangan
                            </h3>
                        </div>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        SKL : Status Ketaatan Lingkungan
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        SPBM : Status Pemenuhan Baku Mutu
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        IL : Ijin Lingkungan
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">AL : Air Limbah</p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">LB3 : Limbah B3</p>
                                </div>
                            </div>
                            <div className="space-y-2">
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        SB : Sumber Bergerak
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        BS : Kebisingan & Udara Ambien
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        STB : Sumber Tidak Bergerak
                                    </p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">LP : Limbah Padat</p>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        KDM : Kawasan Dilarang Merokok
                                    </p>
                                </div>
                            </div>
                            <div className="space-y-2 pt-3">
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        STT : Surat Tanda Terima
                                    </p>
                                </div>
                            </div>
                            <div className="space-y-2 pt-3">
                                <div className="flex items-center gap-2">
                                    <div className="min-w-[8px] w-2 h-2 rounded-full bg-green-500"></div>
                                    <p className="text-sm">
                                        SE : Surat Evaluasi
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Status Data Section */}
                    <div className="bg-white rounded-lg shadow-sm border p-4 md:p-6 mt-4 md:mt-0">
                        <div className="flex items-center gap-2 mb-4">
                            <BadgeCheck className="w-5 h-5 text-green-600" />
                            <h3 className="font-semibold text-lg">
                                Status Data
                            </h3>
                        </div>
                        <div className="space-y-3">
                            <div className="flex items-center gap-3 p-2 rounded-md bg-red-100">
                                <div className="min-w-[12px] w-3 h-3 rounded-full bg-red-500"></div>
                                <p className="text-sm text-red-700">
                                    Data belum diisi
                                </p>
                            </div>
                            <div className="flex items-center gap-3 p-2 rounded-md bg-gray-100">
                                <div className="min-w-[12px] w-3 h-3 rounded-full bg-gray-500"></div>
                                <p className="text-sm text-gray-700">
                                    Data telah diisi dan belum diverifikasi
                                </p>
                            </div>
                            <div className="flex items-center gap-3 p-2 rounded-md bg-orange-100">
                                <div className="min-w-[12px] w-3 h-3 rounded-full bg-orange-500"></div>
                                <p className="text-sm text-orange-700">
                                    Data telah siap untuk diverifikasi
                                </p>
                            </div>
                            <div className="flex items-center gap-3 p-2 rounded-md bg-green-100">
                                <div className="min-w-[12px] w-3 h-3 rounded-full bg-green-500"></div>
                                <p className="text-sm text-green-700">
                                    Data telah diisi dan diverifikasi
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
