import * as React from "react";
import { ColumnDef } from "@tanstack/react-table";

import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  formatDateToIndonesian,
  getOnlyDate,
  htmlToString,
} from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
import { validateMediaLink } from "@/service/media-tracking/media-tracking";
import toast from "react-hot-toast";

const columns: ColumnDef<any>[] = [
  {
    accessorKey: "no",
    header: "No",
    cell: ({ row }) => <span>{row.getValue("no")}</span>,
  },
  {
    accessorKey: "source",
    header: "Media Online",
    cell: ({ row }) => (
      <span className="normal-case">{row.getValue("source")}</span>
    ),
  },
  {
    accessorKey: "title",
    header: "Judul Berita",
    cell: ({ row }) => (
      <span className="normal-case">{row.getValue("title")}</span>
    ),
  },
  // {
  //   accessorKey: "link",
  //   header: "Link Berita",
  //   cell: ({ row }) => (
  //     <span className="normal-case">{row.getValue("link")}</span>
  //   ),
  // },
  {
    accessorKey: "link",
    header: "Link Berita",
    cell: ({ row }) => {
      const link = row.getValue<string>("link");

      if (!link) {
        return <span className="text-muted-foreground">-</span>;
      }

      return (
        <Link
          href={link}
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-600 underline hover:text-blue-800 break-all"
        >
          {link}
        </Link>
      );
    },
  },
  {
    id: "validation",
    header: "Validasi",
    cell: ({ row, table }) => {
      const original = row.original;

      const isValid = original.isValid;
      const link = original.link;

      const updateRow = (data: Partial<any>) => {
        table.options.meta?.updateData(row.index, data);
      };

      const handleValid = async () => {
        try {
          await validateMediaLink(original.id, true);

          updateRow({
            isValid: true,
          });
        } catch (err: any) {
          toast.error(err.message);
        }
      };

      const handleInvalid = async () => {
        try {
          await validateMediaLink(original.id, false);

          updateRow({
            isValid: false,
          });
        } catch (err: any) {
          toast.error(err.message);
        }
      };

      if (!link) {
        return <span className="text-muted-foreground">-</span>;
      }

      if (isValid === true) {
        return (
          <Button
            size="sm"
            className="bg-green-600 hover:bg-green-700"
            disabled
          >
            Valid
          </Button>
        );
      }

      return (
        <div className="flex gap-2">
          <Button size="sm" variant="outline" onClick={handleValid}>
            Relevan
          </Button>
          <Button size="sm" variant="outline" onClick={handleInvalid}>
            Tidak Relevan
          </Button>
        </div>
      );
    },
  },
];

export default columns;