"use client";

import React, { useState } from "react";
import { FiX, FiTag } from "react-icons/fi";

interface Props {
  isOpen: boolean;
  company: { id: number; name: string } | null;
  onClose: () => void;
  onSave: (amount: number, currency: string, interval: string) => Promise<void> | void;
}

export default function SetPriceModal({ isOpen, company, onClose, onSave }: Props) {
  const [amount, setAmount] = useState("50000");
  const [currency, setCurrency] = useState("aed");
  const [interval, setInterval] = useState("year");
  const [saving, setSaving] = useState(false);

  if (!isOpen || !company) return null;

  const save = async () => {
    setSaving(true);
    try {
      await onSave(Number(amount), currency, interval);
      onClose();
    } finally {
      setSaving(false);
    }
  };

  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 9998 }} />
      <div style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 9999, background: "#fff", borderRadius: 16, width: "min(440px, 95vw)", boxShadow: "0 20px 60px rgba(0,0,0,0.2)", overflow: "hidden" }}>
        <div style={{ padding: "18px 22px", background: "linear-gradient(135deg, #0f766e, #14b8a6)", color: "#fff", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 800, display: "flex", alignItems: "center", gap: 8 }}>
            <FiTag size={17} /> Set Price
          </h2>
          <button onClick={onClose} style={{ background: "rgba(255,255,255,0.2)", border: "none", borderRadius: 8, padding: 7, color: "#fff", cursor: "pointer" }}>
            <FiX size={16} />
          </button>
        </div>

        <div style={{ padding: 22 }}>
          <p style={{ margin: "0 0 14px", fontSize: 13, color: "#64748b" }}>
            Company: <strong style={{ color: "#0f172a" }}>{company.name}</strong>
          </p>

          <label style={lbl}>Amount — minor units (50000 = 500.00)</label>
          <input value={amount} onChange={(e) => setAmount(e.target.value)} style={inp} />

          <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
            <div style={{ flex: 1 }}>
              <label style={lbl}>Currency</label>
              <input value={currency} onChange={(e) => setCurrency(e.target.value)} style={inp} />
            </div>
            <div style={{ flex: 1 }}>
              <label style={lbl}>Interval</label>
              <select value={interval} onChange={(e) => setInterval(e.target.value)} style={inp}>
                <option value="year">year</option>
                <option value="month">month</option>
                <option value="one_time">one_time</option>
              </select>
            </div>
          </div>

          <button onClick={save} disabled={saving} style={{ marginTop: 18, width: "100%", padding: 11, borderRadius: 9, border: "none", background: "#0f766e", color: "#fff", fontWeight: 700, fontSize: 14, cursor: "pointer", opacity: saving ? 0.6 : 1 }}>
            {saving ? "Saving…" : "Save price"}
          </button>
        </div>
      </div>
    </>
  );
}

const lbl: React.CSSProperties = { display: "block", fontSize: 12, fontWeight: 600, color: "#64748b", marginBottom: 4 };
const inp: React.CSSProperties = { width: "100%", padding: "9px 11px", borderRadius: 8, border: "1px solid #cbd5e1", fontSize: 14, boxSizing: "border-box" };