import React from "react";
import Input from "@/src/components/admin/form/input/InputField";

interface QuotationCardProps {
  id: number;
  name: string;
  file: string;
  status: string;
  isSelected: boolean;
  remark: string;
  isApproved: boolean;
  hasApprovedQuotation: boolean;
  onSelect: (id: number) => void;
  onRemarkChange: (remark: string) => void;
  onDownload: (file: string) => void;
}

export default function QuotationCard({
  id,
  name,
  file,
  status,
  isSelected,
  remark,
  isApproved,
  hasApprovedQuotation,
  onSelect,
  onRemarkChange,
  onDownload,
}: QuotationCardProps) {
  const isDisabled = false;

  return (
    <div className={`overflow-hidden border rounded-xl bg-white relative ${
      isDisabled ? "opacity-50 cursor-not-allowed border-gray-200" : "border-gray-200"
    } ${
      isApproved && hasApprovedQuotation ? "border-green-500 border-2" : ""
    }`}>
      {isApproved && hasApprovedQuotation && (
        <div className="absolute -top-2 -right-2 z-10">
          <div className="bg-green-600 text-white rounded-full p-1.5 shadow-md border-2 border-white">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="3">
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
          </div>
        </div>
      )}

      <table className="w-full text-sm">
        <tbody>
          <tr className="border-b last:border-b-0">
            <td className="bg-gray-50 px-4 py-3 w-1/3">
              <label className={`flex items-center gap-2 ${
                isDisabled ? "cursor-not-allowed" : "cursor-pointer"
              }`}>
                <input
                  type="radio"
                  name="quotation"
                  value={id}
                  checked={isSelected}
                  onChange={() => !isDisabled && onSelect(id)}
                  disabled={isDisabled}
                  className="form-radio h-4 w-4 text-teal-600 disabled:opacity-50"
                />
                <span className="font-medium text-gray-800">{name}</span>
                {isApproved && hasApprovedQuotation && (
                  <span className="ml-2 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-semibold">
                    Approved
                  </span>
                )}
              </label>
            </td>

            <td className="px-4 py-3 text-right">
              <button
                type="button"
                className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-1.5 rounded-lg text-sm font-medium transition"
                onClick={() => onDownload(file)}
              >
                Download
              </button>
            </td>
          </tr>

          {isSelected && (
            <tr>
              <td className="bg-gray-50 px-4 py-3 font-medium text-gray-700">
                Remark
              </td>
              <td className="px-4 py-3 text-gray-900">
                <Input
                  placeholder="Enter remark about quotation..."
                  value={remark}
                  onChange={(e) => onRemarkChange(e.target.value)}
                />
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}