"use client";
import { useState } from "react";
import { ColumnDef } from "@tanstack/react-table";
import Delete from "@/components/admin/custom ui/Delete";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Pencil, Save, X } from "lucide-react";
import PriceDisplay from "@/components/ui/formattedPrice";

export const columns: ColumnDef<Payments>[] = [
  {
    accessorKey: "serial",
    header: "#",
    cell: ({ row }) => <span>{row.index + 1}</span>,
  },
  {
    accessorKey: "id",
    header: "Transaction ID",
    cell: ({ row }) => <span>{row.original.paymentID}</span>,
  },
  {
    accessorKey: "id",
    header: "Transaction Status",
    cell: ({ row }) => <span>{row.original.transactionStatus}</span>,
  },
  {
    accessorKey: "order_id",
    header: "Order ID",
    cell: ({ row }) => <p>{row.original?.order?.id}</p>,
  },
  {
    accessorKey: "payment_date",
    header: "Payment Date",
    cell: ({ row }) => (
      <span>
        {new Date(row.original.created_on).toLocaleString("en-GB", {
          day: "2-digit",
          month: "2-digit",
          year: "numeric",
          hour: "numeric",
          minute: "2-digit",
          second: "2-digit",
          hour12: true,
        })}
      </span>
    ),
  },
  {
    accessorKey: "amount",
    header: "Amount",
    cell: ({ row }) => <span><PriceDisplay price={row.original.amount} /></span>,
  },
  {
    accessorKey: "payment_status",
    header: "Payment Status",
    cell: ({ row }) => (
      <div className="font-bold">
        {row.original.payment_status}
        {/* <PaymentStatusCell row={row} /> */}
      </div>
    ),
  },
  {
    accessorKey: "Paid_by",
    header: "Paid_by",
    cell: ({ row }) => <p>{row.original.profile.full_name}</p>,
  },
  // {
  //   id: "actions",
  //   cell: ({ row }) => <Delete id={String(row.original.id)} item="payments" />,
  // },
];

const PaymentStatusCell = ({ row }:
  { row: { original: Payments } }
) => {
  const [isEditing, setIsEditing] = useState(false);
  const [status, setStatus] = useState(row.original.payment_status);
  const [isTouched, setIsTouched] = useState(false);

  const handleEdit = () => setIsEditing(true);
  const handleCancel = () => {
    setIsEditing(false);
    setStatus(row.original.payment_status);
    setIsTouched(false);
  };

  const handleSave = async () => {
    try {
      console.log("status", status);
      setIsEditing(false)
      setIsTouched(false)

      // const response = await fetch(`/api/admin/payments/${row.original.id}`, {
      //   method: "PUT",
      //   headers: { "Content-Type": "application/json" },
      //   body: JSON.stringify({ payment_status: status }),
      // });
      // if (response.ok) {
      //   setIsEditing(false);
      //   setIsTouched(false);
      // } else {
      //   console.error("Failed to update payment status");
      // }
    } catch (error) {
      console.error("Error updating payment status:", error);
    }
  };

  if (isEditing) {
    return (
      <div className="flex items-center space-x-2">
        <Select
          value={status}
          onValueChange={(value) => {
            setStatus(value as "PAID" | "PENDING" | "FAILED" | "REFUNDED");
            setIsTouched(true);
          }}
        >
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Select status" />
          </SelectTrigger>
          <SelectContent className="bg-white">
            <SelectItem value="PENDING">PENDING</SelectItem>
            <SelectItem value="PAID">PAID</SelectItem>
            <SelectItem value="FAILED">FAILED</SelectItem>
            <SelectItem value="REFUNDED">REFUNDED</SelectItem>
          </SelectContent>
        </Select>
        <Button onClick={handleSave} disabled={!isTouched}>
          <Save size={18} />
        </Button>
        <Button variant="outline" onClick={handleCancel}
          className="bg-red-500"
        >
          <X size={14} />
        </Button>
      </div>
    );
  }

  return (
    <div className="flex items-center space-x-2">
      <span>{status}</span>
      <Button
        variant="outline"
        size="sm"
        onClick={handleEdit}
        className="h-6 bg-green-400"
      >
        <Pencil size={14} />
      </Button>
    </div>
  );
};

const AmountCell = ({ row }:
  { row: { original: Payments } }
) => {
  const [isEditing, setIsEditing] = useState(false);
  const [amount, setAmount] = useState(row.original.amount);
  const [isTouched, setIsTouched] = useState(false);

  const handleEdit = () => setIsEditing(true);
  const handleCancel = () => {
    setIsEditing(false);
    setAmount(row.original.amount);
    setIsTouched(false);
  };

  const handleSave = async () => {
    try {
      console.log("amount", amount);
      setIsEditing(false)
      setIsTouched(false)
      // const response = await fetch(`/api/admin/payments/${row.original.id}`, {
      //   method: "PUT",
      //   headers: { "Content-Type": "application/json" },
      //   body: JSON.stringify({ amount: Number(amount) }),
      // });
      // if (response.ok) {
      //   setIsEditing(false);
      //   setIsTouched(false);
      // } else {
      //   console.error("Failed to update amount");
      // }
    } catch (error) {
      console.error("Error updating amount:", error);
    }
  };

  if (isEditing) {
    return (
      <div className="flex items-center space-x-2">
        <Input
          type="number"
          value={amount}
          onChange={(e) => {
            setAmount(Number(e.target.value));
            setIsTouched(true);
          }}
          className="w-[100px]"
        />
        <Button onClick={handleSave} disabled={!isTouched}>
          <Save size={18} />
        </Button>
        <Button variant="outline" onClick={handleCancel}
          className="bg-red-500">
          <X size={14} />
        </Button>
      </div>
    );
  }

  return (
    <div className="flex items-center space-x-2">
      <span>{amount}</span>
      <Button
        variant="outline"
        size="sm"
        onClick={handleEdit}
        className="h-6 bg-green-400"
      >
        <Pencil size={14} />
      </Button>
    </div>
  );
};