import React, { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { CircleHelp, FileDown, Printer } from "lucide-react";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import { Textarea } from "@/components/ui/textarea";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
import UploadDoc from "@/components/upload_doc";

interface PelaporanALFormProps {
    onSubmit: (data: any) => void;
}

const PelaporanALForm = ({ onSubmit }: PelaporanALFormProps) => {
    const [isConnected, setIsConnected] = useState<boolean | null>(null);
    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
    const [uploadedFile, setUploadedFile] = useState<File | null>(null);

    return (
        <AuthenticatedLayout header="Pelaporan Air Limbah">
            <Head title="Pelaporan Air Limbah" />
            <div className="p-4 space-y-6">
                <Card className="shadow-lg">
                    <CardHeader className="bg-[#166534] text-white rounded-t-lg">
                        <div className="flex justify-between items-center">
                            <div>
                                <CardTitle className="text-xl">
                                    Laporan Pengelolaan Air Limbah - Ujicoba
                                </CardTitle>
                                <p className="text-sm opacity-90">
                                    Tahun 2025 - Periode Triwulan 1
                                </p>
                            </div>
                            <div className="flex gap-2">
                                <Button
                                    variant="secondary"
                                    size="sm"
                                    onClick={() => window.history.back()}
                                >
                                    Kembali
                                </Button>

                                <Button
                                    variant="secondary"
                                    size="sm"
                                    onClick={() => window.print()}
                                >
                                    <Printer />
                                </Button>
                                <Button
                                    variant="secondary"
                                    size="sm"
                                    onClick={() => {
                                        // Add PDF download logic here
                                    }}
                                >
                                    <FileDown />
                                </Button>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent className="p-6">
                        <div className="space-y-6">
                            {/* Header Section */}
                            <div className="flex justify-between items-center gap-4 mb-6">
                                <div className="flex items-center gap-2">
                                    <h2>Tersambung IPAL Komunal:</h2>
                                    <div className="flex flex-row gap-3">
                                        <div className="flex items-center gap-2">
                                            <input
                                                type="radio"
                                                id="tersambung"
                                                name="connection"
                                                className="w-4 h-4 text-teal-600"
                                                onChange={() =>
                                                    setIsConnected(true)
                                                }
                                                checked={isConnected === true}
                                            />
                                            <Label htmlFor="tersambung">
                                                Ya
                                            </Label>
                                        </div>
                                        <div className="flex items-center gap-2">
                                            <input
                                                type="radio"
                                                id="tidak"
                                                name="connection"
                                                className="w-4 h-4 text-teal-600"
                                                onChange={() =>
                                                    setIsConnected(false)
                                                }
                                                checked={isConnected === false}
                                            />
                                            <Label htmlFor="tidak">Tidak</Label>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    {isConnected && (
                                        <div className="flex items-center gap-2">
                                            <h2>
                                                Lampiran
                                                <span className="text-red-600">
                                                    *
                                                </span>{" "}
                                                :
                                            </h2>
                                            <Button
                                                variant="outline"
                                                className="w-48"
                                                onClick={() =>
                                                    setIsUploadModalOpen(true)
                                                }
                                            >
                                                {uploadedFile
                                                    ? uploadedFile.name
                                                    : "Unggah Surat Kerjasama"}
                                            </Button>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <UploadDoc
                                isOpen={isUploadModalOpen}
                                onClose={() => setIsUploadModalOpen(false)}
                                onUpload={(file) => {
                                    setUploadedFile(file);
                                    // Handle the file upload logic here
                                    console.log("File uploaded:", file);
                                }}
                            />

                            {/* Main Form Table */}
                            <div className="border rounded-lg overflow-hidden">
                                <table className="w-full">
                                    <thead>
                                        <tr className="bg-[#166534] text-white">
                                            <th className="p-3 text-left w-16">
                                                No
                                            </th>
                                            <th className="p-3 text-left">
                                                Komponen
                                            </th>
                                            <th className="p-3 text-left w-32">
                                                Hasil
                                            </th>
                                            <th className="p-3 text-left w-24">
                                                Nilai
                                            </th>
                                            <th className="p-3 text-left w-32">
                                                Lampiran
                                            </th>
                                            <th className="p-3 text-left w-32">
                                                Verifikasi
                                            </th>
                                            <th className="p-3 text-left w-32">
                                                Keterangan
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {/* Section 1 */}
                                        <tr className="bg-teal-50">
                                            <td className="p-3">I</td>
                                            <td
                                                className="p-3 font-medium"
                                                colSpan={1}
                                            >
                                                Nilai tingkat ketaatan
                                                pengelolaan air limbah (IKLl)
                                                (%)
                                            </td>
                                            <td className="p-3"></td>
                                            <td className="p-3">100</td>
                                            <td className="p-3"></td>
                                            <td className="p-3"></td>
                                            <td className="p-3"></td>
                                        </tr>

                                        {/* Technical Requirements */}
                                        {[
                                            "Instalasi pengolah air limbah",
                                            "Flowmeter",
                                            "Titik pengambilan sampel",
                                            "Saluran air limbah & air hujan terpisah",
                                            "Izin pembuangan air limbah",
                                        ].map((item, index) => (
                                            <tr
                                                key={index}
                                                className="border-t"
                                            >
                                                <td className="p-3">
                                                    A{index + 1}
                                                </td>
                                                <td className="p-3">
                                                    <div className="flex justify-between items-center w-full">
                                                        <div>{item}</div>
                                                        <Tooltip>
                                                            <TooltipTrigger>
                                                                <CircleHelp className="text-teal-600 w-5 h-5" />
                                                            </TooltipTrigger>
                                                            <TooltipContent>
                                                                <p>
                                                                    Deskripsi
                                                                    untuk {item}
                                                                </p>
                                                            </TooltipContent>
                                                        </Tooltip>
                                                    </div>
                                                </td>
                                                <td className="p-3">
                                                    {" "}
                                                    <Select>
                                                        <SelectTrigger className="w-24">
                                                            <SelectValue placeholder="Ada" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            <SelectItem value="ada">
                                                                Ada
                                                            </SelectItem>
                                                            <SelectItem value="tidak">
                                                                Tidak Ada
                                                            </SelectItem>
                                                        </SelectContent>
                                                    </Select>
                                                </td>
                                                <td className="p-3">100</td>
                                                <td className="p-3"></td>
                                                <td className="p-3"></td>
                                                <td className="p-3"></td>
                                            </tr>
                                        ))}

                                        {/* Implementation Section */}
                                        {[
                                            {
                                                name: "Pengujian air limbah",
                                                hasAttachment: true,
                                            },
                                            {
                                                name: "Pemenuhan baku mutu air limbah",
                                                hasAttachment: false,
                                            },
                                            {
                                                name: "Pelaksanaan dan pemutusan wewenang",
                                                hasSelect: true,
                                            },
                                            {
                                                name: "Pembuatan neraca air",
                                                hasSelect: true,
                                            },
                                            {
                                                name: "Sertifikasi kompetensi",
                                                hasSelect: true,
                                            },
                                        ].map((item, index) => (
                                            <tr
                                                key={index}
                                                className="border-t"
                                            >
                                                <td className="p-3">
                                                    A{index + 6}
                                                </td>
                                                <td className="p-3">
                                                    <div className="flex justify-between items-center w-full">
                                                        <div>{item.name}</div>
                                                        <CircleHelp className="text-teal-600 w-5 h-5" />
                                                    </div>
                                                </td>
                                                <td className="p-3">
                                                    <Select>
                                                        <SelectTrigger className="w-24">
                                                            <SelectValue placeholder="Ada" />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            <SelectItem value="ada">
                                                                Ada
                                                            </SelectItem>
                                                            <SelectItem value="tidak">
                                                                Tidak Ada
                                                            </SelectItem>
                                                        </SelectContent>
                                                    </Select>
                                                </td>
                                                <td className="p-3">100</td>
                                                <td className="p-3">
                                                    {item.hasAttachment && (
                                                        <span className="text-teal-600">
                                                            Data...
                                                        </span>
                                                    )}
                                                </td>
                                                <td className="p-3"></td>
                                                <td className="p-3"></td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>

                            {/* Notes Section */}
                            <div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mt-6">
                                <h2 className="text-lg font-semibold mb-3 text-gray-800">
                                    Catatan
                                </h2>
                                <Textarea
                                    placeholder="Tambahkan catatan atau komentar tambahan di sini..."
                                    className="min-h-[100px] bg-white"
                                />
                            </div>

                            {/* Agreement & Submit Section */}
                            <div className="mt-8 space-y-6">
                                <div className="flex items-start gap-3 p-4 bg-green-50 rounded-lg border border-teal-200">
                                    <Checkbox id="agreement" className="mt-1" />
                                    <Label
                                        htmlFor="agreement"
                                        className="text-sm leading-relaxed text-gray-700"
                                    >
                                        Dengan mencentang ini, kami menyatakan
                                        bahwa laporan ini telah disusun
                                        berdasarkan ketentuan peraturan yang
                                        berlaku dan kami bersedia bertanggung
                                        jawab atas kebenaran data-data yang kami
                                        kirimkan sesuai dengan fakta dilapangan.
                                    </Label>
                                </div>

                                <div className="flex justify-end gap-4">
                                    <Button
                                        variant="outline"
                                        className="hover:bg-gray-100"
                                    >
                                        Simpan Draft
                                    </Button>
                                    <Button className="bg-[#166534] hover:bg-green-700 transition-colors px-8">
                                        Kirim Laporan
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AuthenticatedLayout>
    );
};

export default PelaporanALForm;
