"use client";

import React, { useState } from "react";
import { cn } from "@/lib/utils";
import SearchableSelect from "@/components/ui/SearchableSelect";
import { PRIMARY_COLOR, type CSSPropertiesWithVars } from "@/lib/common";

interface Currency {
  value: string;
  label: string;
}

interface OptionRowProps {
  currencies: Currency[]; // you'll set from API
  onAdd: () => void;
  onRemove: () => void;
  canRemove: boolean;
}

export default function OptionRow({ currencies, onAdd, onRemove, canRemove }: OptionRowProps) {
  const [selectedCurrency, setSelectedCurrency] = useState<{ label: string; value: string } | null>(null);

  const handleAdd = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    onAdd();
  };

  const handleRemove = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    if (!canRemove) return;
    onRemove();
  };

  const handleCurrencyChange = (value: { label: string; value: string } | null) => {
    setSelectedCurrency(value);
  };

  return (
    <div className="rounded-lg bg-white p-4">
      {/* Hidden Fields */}
      <input
        type="hidden"
        name="options[underlying][]"
        defaultValue=""
      />
      <input
        type="hidden"
        name="options[sub_title][]"
        defaultValue=""
      />

      <div className="flex flex-wrap items-start gap-4">
        <div className="flex flex-1 min-w-[200px] max-w-[220px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Security Ticker / ISIN
          </label>
          <input
            type="text"
              className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
              style={{
                "--focus-border": PRIMARY_COLOR,
                "--focus-ring": `${PRIMARY_COLOR}4D`,
              } as CSSPropertiesWithVars}
              onFocus={(e) => {
                e.currentTarget.style.borderColor = PRIMARY_COLOR;
                e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}4D`;
              }}
              onBlur={(e) => {
                e.currentTarget.style.borderColor = "";
                e.currentTarget.style.boxShadow = "";
              }}
              name="options[ticker][]"
              required
              placeholder="e.g. AAPL"
            defaultValue=""
          />
        </div>

        <div className="flex flex-1 min-w-[200px] max-w-[240px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Security Name
          </label>
          <input
            type="text"
              className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
              style={{
                "--focus-border": PRIMARY_COLOR,
                "--focus-ring": `${PRIMARY_COLOR}4D`,
              } as CSSPropertiesWithVars}
              onFocus={(e) => {
                e.currentTarget.style.borderColor = PRIMARY_COLOR;
                e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}4D`;
              }}
              onBlur={(e) => {
                e.currentTarget.style.borderColor = "";
                e.currentTarget.style.boxShadow = "";
              }}
              name="options[isin][]"
              required
              placeholder="Full instrument name"
            defaultValue=""
          />
        </div>

        <div className="flex flex-1 min-w-[200px] max-w-[240px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Reference Link
          </label>
          <input
            type="text"
              className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
              style={{
                "--focus-border": PRIMARY_COLOR,
                "--focus-ring": `${PRIMARY_COLOR}4D`,
              } as CSSPropertiesWithVars}
              onFocus={(e) => {
                e.currentTarget.style.borderColor = PRIMARY_COLOR;
                e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}4D`;
              }}
              onBlur={(e) => {
                e.currentTarget.style.borderColor = "";
                e.currentTarget.style.boxShadow = "";
              }}
              name="options[reference_link][]"
              defaultValue=""
            placeholder="Document / info URL"
          />
        </div>

        <div className="flex flex-1 min-w-[140px] max-w-[160px] flex-col gap-1.5">
          {/* Hidden input for form submission */}
          <input
            type="hidden"
            name="options[currency][]"
            value={selectedCurrency?.value || ""}
          />
          <SearchableSelect
            label="Currency"
            apiUrl="/api/searchabledropdown/currencylist"
            value={selectedCurrency}
            onChange={handleCurrencyChange}
            placeholder="Select currency"
            className="text-sm"
          />
        </div>

        <div className="flex min-w-[110px] max-w-[130px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Spot Price
          </label>
          <input
            type="text"
            name="options[spot_price][]"
            className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
            required
            onInput={(e) => {
              const target = e.target as HTMLInputElement;
              target.value = target.value
                .replace(/[^0-9.]/g, "")
                .replace(/(\..*)\./g, "$1");
            }}
            defaultValue=""
            placeholder="0.00"
          />
        </div>

        <div className="flex min-w-[110px] max-w-[130px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Strike Price
          </label>
          <input
            type="text"
            name="options[strike_price][]"
            className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
            required
            onInput={(e) => {
              const target = e.target as HTMLInputElement;
              target.value = target.value
                .replace(/[^0-9.]/g, "")
                .replace(/(\..*)\./g, "$1");
            }}
            defaultValue=""
            placeholder="0.00"
          />
        </div>

        <div className="flex min-w-[110px] max-w-[130px] flex-col gap-1.5">
          <label className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Quantity
          </label>
          <input
            type="text"
            name="options[quantity][]"
            className="w-full rounded-lg border border-slate-200/80 bg-white px-3 py-2 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-opacity-30"
            required
            onInput={(e) => {
              const target = e.target as HTMLInputElement;
              target.value = target.value
                .replace(/[^0-9.]/g, "")
                .replace(/(\..*)\./g, "$1");
            }}
            defaultValue=""
            placeholder="0"
          />
        </div>
        <div className="ml-auto flex items-start gap-2">
          <button
            type="button"
            onClick={handleAdd}
            className="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold transition hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-40"
            style={{
              borderColor: `${PRIMARY_COLOR}66`,
              backgroundColor: `${PRIMARY_COLOR}1A`,
              color: PRIMARY_COLOR,
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = PRIMARY_COLOR;
              e.currentTarget.style.color = "white";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = `${PRIMARY_COLOR}1A`;
              e.currentTarget.style.color = PRIMARY_COLOR;
            }}
            onFocus={(e) => {
              e.currentTarget.style.boxShadow = `0 0 0 2px ${PRIMARY_COLOR}66`;
            }}
            onBlur={(e) => {
              e.currentTarget.style.boxShadow = "";
            }}
          >
            <span className="text-base leading-none">＋</span>
            Add Row
          </button>
          <button
            type="button"
            onClick={handleRemove}
            disabled={!canRemove}
            className={cn(
              "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold transition focus:outline-none focus-visible:ring-2",
              canRemove
                ? "border-red-300/60 bg-red-50 text-red-500 hover:-translate-y-0.5 hover:bg-red-100 hover:text-red-600 focus-visible:ring-red-200"
                : "cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400"
            )}
          >
            <span className="text-base leading-none">✕</span>
            Remove
          </button>
        </div>
      </div>

    </div>
  );
}