"use client";

import { useState } from "react";

interface Rate {
  name: string;
  in_call: string | number | null;
  out_call: string | number | null;
}

interface RateCalculatorProps {
  rates: Rate[];
}

export default function RateCalculator({ rates }: RateCalculatorProps) {
  const [callType, setCallType] = useState<"in_call" | "out_call">("in_call");

  // Find the rate for the selected duration/type
  const selectedRate = rates.find((r) => {
    const price = callType === "in_call" ? r.in_call : r.out_call;
    return price && Number(price) > 0;
  });

  if (rates.length === 0) return null;

  return (
    <div className="bg-surface-light border border-gold/20 rounded-lg p-4 space-y-4">
      <h3 className="text-sm font-semibold text-gold flex items-center gap-2">
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
        Rate Calculator
      </h3>

      {/* Incall / Outcall Toggle */}
      <div className="flex rounded-lg overflow-hidden border border-surface">
        <button
          onClick={() => setCallType("in_call")}
          className={`flex-1 py-2 text-sm font-medium transition-colors ${
            callType === "in_call"
              ? "bg-gold text-black"
              : "bg-surface text-text-muted hover:text-text"
          }`}
        >
          Incall
        </button>
        <button
          onClick={() => setCallType("out_call")}
          className={`flex-1 py-2 text-sm font-medium transition-colors ${
            callType === "out_call"
              ? "bg-gold text-black"
              : "bg-surface text-text-muted hover:text-text"
          }`}
        >
          Outcall
        </button>
      </div>

      {/* Duration List */}
      <div className="space-y-2">
        {rates.map((rate, i) => {
          const price = callType === "in_call" ? rate.in_call : rate.out_call;
          const hasPrice = price && Number(price) > 0;

          return (
            <div
              key={i}
              className={`flex items-center justify-between py-2 px-3 rounded-lg transition-colors ${
                hasPrice
                  ? "bg-surface hover:bg-surface-light"
                  : "bg-surface/50 opacity-50"
              }`}
            >
              <span className="text-sm text-text">{rate.name}</span>
              <span
                className={`text-sm font-semibold ${
                  hasPrice ? "text-gold" : "text-text-muted"
                }`}
              >
                {hasPrice ? `${price}` : "N/A"}
              </span>
            </div>
          );
        })}
      </div>

      {!selectedRate && (
        <p className="text-xs text-text-muted text-center">
          No {callType === "in_call" ? "incall" : "outcall"} rates available.
        </p>
      )}
    </div>
  );
}