import {
  Field,
  FieldContent,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export interface PaymentMethodOption {
  id: string;
  name: string;
  description: string;
  enabled: boolean;
}

/** Small badge glyph per method; falls back to a neutral wallet icon. */
function MethodIcon({ id }: { id: string }) {
  if (id === "cod") {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M3 6h18v12H3zm9 3a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3M7 8a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2v-4a2 2 0 0 1-2-2z"
        />
      </svg>
    );
  }
  if (id === "bkash") {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        className="text-[#DF146E]"
        viewBox="0 0 48 48"
      >
        <path
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M22.981 8.632s-4.163 14.704-3.809 14.704s16.476 2.923 16.476 2.923Z"
        />
        <path
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M22.981 8.632L6.329 6.152l12.843 17.184l2.215 10.186l14.261-7.263l3.72-8.814l-8.975 1.501m7.536 1.909H43l-3.632-3.41"
        />
        <path
          fill="none"
          stroke="currentColor"
          strokeLinecap="round"
          strokeLinejoin="round"
          d="m21.387 33.522l.354 1.905l-8.016 6.421l5.447-18.512m16.476 2.923l-.531 2.879l-12.269 3.64M8.455 8.997H5L16.044 19.15"
        />
      </svg>
    );
  }
  if (id === "nagad") {
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        className="text-[#EF4C23]"
        viewBox="0 0 24 24"
      >
        <path
          fill="currentColor"
          d="M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m1 3.5v1A1.5 1.5 0 0 0 8.5 8A1.5 1.5 0 0 0 10 6.5v-1A1.5 1.5 0 0 0 8.5 4A1.5 1.5 0 0 0 7 5.5M18 16v-2H7v2h11m0-5v-2H7v2h11Z"
        />
      </svg>
    );
  }
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 24 24"
    >
      <path
        fill="currentColor"
        d="M21 18v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1h-9a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9M12 6h9v8h-9V6m2 3v2h5V9h-5Z"
      />
    </svg>
  );
}

export default function PaymentMethod({
  value,
  onValueChange,
  methods,
}: {
  value: string;
  onValueChange: (value: string) => void;
  methods: PaymentMethodOption[];
}) {
  if (methods.length === 0) {
    methods = [{ id: "cod", name: "Cash on Delivery", description: "Collect payment at delivery.", enabled: true }];
  }

  return (
    <div className="w-full">
      <h3 className="text-lg font-semibold mb-2">Payment Method</h3>

      <RadioGroup value={value} onValueChange={onValueChange} className="space-y-2">
        {methods.map((method) => (
          <FieldLabel htmlFor={method.id} key={method.id}>
            <Field orientation="horizontal" className="min-h-12 px-3 py-2">
              <FieldContent>
                <FieldTitle className="text-sm">
                  <MethodIcon id={method.id} />
                  <span className="ml-1">{method.name}</span>
                </FieldTitle>
              </FieldContent>

              <RadioGroupItem id={method.id} value={method.id} />
            </Field>
          </FieldLabel>
        ))}
      </RadioGroup>
    </div>
  );
}