import React, { useState } from 'react';

import { GRADIENT, MONO } from '../signup-mirror/theme';

import { ModalShell } from './modal-shell';

export function PartnerCodeModal({
  onApply,
  onClose,
  onNoCode,
  applying,
  error,
}: {
  onApply: (code: string) => void;
  onClose: () => void;
  onNoCode: () => void;
  applying: boolean;
  error?: string;
}): JSX.Element {
  const [code, setCode] = useState('');

  const apply = (): void => {
    const trimmed = code.trim();
    if (!trimmed || applying) return;
    onApply(trimmed);
  };

  return (
    <ModalShell
      label="Setting this up for a client"
      maxWidth={680}
      onClose={onClose}
    >
      <div className="pr-[34px]">
        <h3 className="text-[20px] font-bold tracking-[-0.015em] text-[#202223] mb-1.5">
          Setting this up for a client?
        </h3>
        <p className="text-[13.5px] leading-[1.5] text-[#6d7175]">
          Enter your partner code. It adds 10,000 extra credits to this
          account&apos;s trial, and links the account to your partner dashboard.
        </p>
      </div>

      <label
        htmlFor="rcm-partner-code"
        className={`block ${MONO} text-[10px] tracking-[0.14em] uppercase text-[#8c9196] mt-5 mb-1.5`}
      >
        Your partner code
      </label>
      <input
        id="rcm-partner-code"
        type="text"
        placeholder="PARTNER-XXXX"
        value={code}
        aria-invalid={!!error}
        onChange={event => setCode(event.target.value)}
        onKeyDown={event => {
          if (event.key === 'Enter') {
            event.preventDefault();
            apply();
          }
        }}
        className="w-full p-[12px_13px] rounded-[10px] bg-white border border-[#e1e3e5] text-[#202223] text-[14px] outline-none transition focus:border-[#C8175D] focus:shadow-[0_0_0_3px_rgba(200,23,93,0.15)]"
      />
      {error && (
        <span
          role="alert"
          className="inline-flex items-center gap-1.5 mt-[7px] text-[12px] text-[#d72c0d]"
        >
          {error}
        </span>
      )}

      <div className="flex flex-wrap gap-2.5 mt-[18px]">
        <button
          type="button"
          onClick={apply}
          disabled={applying}
          className={`inline-flex items-center justify-center p-[13px_22px] rounded-[11px] border-none cursor-pointer ${GRADIENT} text-white text-[14.5px] font-semibold tracking-[-0.01em] shadow-[0_4px_16px_rgba(200,23,93,0.2)] transition hover:brightness-110 hover:-translate-y-px disabled:opacity-60`}
        >
          {applying ? 'Applying…' : 'Apply code →'}
        </button>
        <button
          type="button"
          onClick={onNoCode}
          className="inline-flex items-center justify-center p-[13px_20px] rounded-[11px] bg-[#f6f6f7] border border-[#e1e3e5] text-[#202223] text-[14px] font-medium cursor-pointer transition-colors hover:border-[#c9cccf] hover:bg-[#eef0f1]"
        >
          I don&apos;t have a code yet
        </button>
      </div>
      <p className="text-[11.5px] text-[#8c9196] mt-[13px] leading-[1.5]">
        No code? &quot;I don&apos;t have a code yet&quot; takes you to the
        partner program: a free account for your own work, plus commissions on
        the clients you bring. Open to agencies and independent experts alike.
      </p>
    </ModalShell>
  );
}