"use client";

import Link from "next/link";
import { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Eye } from "lucide-react";
import DialogCampaignDetail from "../dialog/campaign-detail";

export default function CoordinatorTable() {
  const data = [
    {
      durasi: "22/08/2025 - 22/08/2026",
      media: "Media Online",
      tujuan: "Sosialisasi",
      materi: "Tersedia",
      description:
        "Lorem ipsum dolor sit amet consectetur. Tempor mi scelerisque enim semper sed nibh.",
      status: "Selesai",
    },
    {
      durasi: "22/08/2025 - 22/08/2026",
      media: "Media Sosial",
      tujuan: "Sosialisasi",
      materi: "Tersedia",
      description:
        "Ultricies pellentesque ullamcorper mattis pellentesque. Amet eu ut.",
      status: "Selesai",
    },
  ];

  const [selectedRow, setSelectedRow] = useState<any>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const openDetail = (row: any) => {
    setSelectedRow(row);
    setIsDialogOpen(true);
  };

  return (
    <>
      <div className="bg-white shadow rounded-lg p-4">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Durasi</TableHead>
                <TableHead>Media</TableHead>
                <TableHead>Tujuan</TableHead>
                <TableHead>Materi</TableHead>
                <TableHead>Deskripsi Promote</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Tindakan</TableHead>
              </TableRow>
            </TableHeader>

            <TableBody>
              {data.map((row, i) => (
                <TableRow key={i}>
                  <TableCell>{row.durasi}</TableCell>
                  <TableCell className="font-medium">{row.media}</TableCell>
                  <TableCell>{row.tujuan}</TableCell>
                  <TableCell>{row.materi}</TableCell>
                  <TableCell className="min-w-[200px] text-gray-600">
                    {row.description}
                  </TableCell>
                  <TableCell>
                    <span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-medium">
                      {row.status}
                    </span>
                  </TableCell>
                  <TableCell>
                    <Button
                      variant="link"
                      className="text-blue-600 p-0 h-auto font-medium flex items-center gap-1"
                      onClick={() => openDetail(row)}
                    >
                      <Eye className="h-4 w-4" />
                      Lihat
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>

        {/* Pagination */}
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-4 text-sm text-gray-500 gap-2">
          <div className="flex items-center">
            <span>Rows per page:</span>
            <select className="ml-2 border rounded px-1 py-0.5">
              <option>6</option>
              <option>12</option>
            </select>
          </div>

          <div className="flex items-center justify-between sm:justify-end gap-2">
            <span>1–1 of 1</span>
            <div className="flex gap-1">
              <button className="text-gray-400 hover:text-gray-600">◀</button>
              <button className="text-gray-400 hover:text-gray-600">▶</button>
            </div>
          </div>
        </div>
      </div>

      <DialogCampaignDetail
        isOpen={isDialogOpen}
        onClose={() => setIsDialogOpen(false)}
        data={selectedRow}
      />
    </>
  );
}