"use client";

import { useState } from "react";
import { PhoneIcon, ChatBubbleLeftIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
import { ChevronDownIcon } from "@heroicons/react/24/solid";

const domesticRates = {
  calling: { rate: 10, unit: "30 sec" },
  sms: { rate: 3, unit: "message" },
};

const internationalSmsRate = 100; // per message

const internationalCallingRates = [
  { country: "United States", code: "US", rate: "31-34" },
  { country: "United Kingdom", code: "UK", rate: "78-108" },
  { country: "Australia", code: "AU", rate: "63-68" },
  { country: "China", code: "CN", rate: "49-57" },
  { country: "India", code: "IN", rate: "98-148" },
  { country: "Singapore", code: "SG", rate: "63-68" },
  { country: "France", code: "FR", rate: "78-108" },
  { country: "Germany", code: "DE", rate: "78-108" },
];

export function SimCallingRates() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="bg-card border border-border rounded-2xl overflow-hidden">
      {/* Header */}
      <div className="p-6 border-b border-border">
        <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
          <PhoneIcon className="w-5 h-5 text-primary" />
          Calling & SMS Rates
        </h3>
        <p className="text-sm text-muted-foreground mt-1">
          Pay-per-use charges apply. Billed 5-6 weeks after usage.
        </p>
      </div>

      {/* Domestic Rates */}
      <div className="p-6 bg-muted/30">
        <h4 className="text-sm font-medium text-foreground mb-4 flex items-center gap-2">
          <span className="w-6 h-4 rounded-sm bg-[#BC002D] relative overflow-hidden flex items-center justify-center">
            <span className="w-3 h-3 rounded-full bg-white" />
          </span>
          Domestic (Japan)
        </h4>

        <div className="grid grid-cols-2 gap-4">
          <div className="bg-card rounded-lg p-4 border border-border">
            <div className="flex items-center gap-2 mb-2">
              <PhoneIcon className="w-4 h-4 text-muted-foreground" />
              <span className="text-sm text-muted-foreground">Voice Calls</span>
            </div>
            <div className="text-2xl font-bold text-foreground">
              ¥{domesticRates.calling.rate}
              <span className="text-sm font-normal text-muted-foreground ml-1">
                /{domesticRates.calling.unit}
              </span>
            </div>
          </div>

          <div className="bg-card rounded-lg p-4 border border-border">
            <div className="flex items-center gap-2 mb-2">
              <ChatBubbleLeftIcon className="w-4 h-4 text-muted-foreground" />
              <span className="text-sm text-muted-foreground">SMS</span>
            </div>
            <div className="text-2xl font-bold text-foreground">
              ¥{domesticRates.sms.rate}
              <span className="text-sm font-normal text-muted-foreground ml-1">
                /{domesticRates.sms.unit}
              </span>
            </div>
          </div>
        </div>

        <p className="text-xs text-muted-foreground mt-3">Incoming calls and SMS are free.</p>
      </div>

      {/* International Rates (Collapsible) */}
      <div className="border-t border-border">
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="w-full p-4 flex items-center justify-between text-left hover:bg-muted/50 transition-colors"
        >
          <div className="flex items-center gap-2">
            <GlobeAltIcon className="w-5 h-5 text-primary" />
            <span className="font-medium text-foreground">International Calling Rates</span>
          </div>
          <ChevronDownIcon
            className={`w-5 h-5 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`}
          />
        </button>

        {isExpanded && (
          <div className="px-6 pb-6">
            <div className="bg-muted/30 rounded-lg overflow-hidden">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-border">
                    <th className="text-left p-3 font-medium text-muted-foreground">Country</th>
                    <th className="text-right p-3 font-medium text-muted-foreground">
                      Rate (¥/30sec)
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {internationalCallingRates.map((rate, index) => (
                    <tr
                      key={rate.code}
                      className={
                        index < internationalCallingRates.length - 1
                          ? "border-b border-border/50"
                          : ""
                      }
                    >
                      <td className="p-3 text-foreground">
                        {rate.country}
                        <span className="text-muted-foreground ml-1">({rate.code})</span>
                      </td>
                      <td className="p-3 text-right font-medium text-foreground">¥{rate.rate}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="mt-4 space-y-2 text-xs text-muted-foreground">
              <p>• International SMS: ¥{internationalSmsRate}/message</p>
              <p>• Rates vary by time of day and day of week</p>
              <p>
                • For full rate details, visit{" "}
                <a
                  href="https://www.docomo.ne.jp/service/world/worldcall/call/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary hover:underline"
                >
                  NTT Docomo's website
                </a>
              </p>
            </div>
          </div>
        )}
      </div>

      {/* Unlimited Calling Option */}
      <div className="p-6 bg-success/5 border-t border-success/20">
        <div className="flex items-start gap-3">
          <div className="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
            <PhoneIcon className="w-5 h-5 text-success" />
          </div>
          <div>
            <h4 className="font-medium text-foreground">Unlimited Domestic Calling</h4>
            <p className="text-sm text-muted-foreground mt-1">
              Add unlimited domestic calls to any Data+Voice plan for{" "}
              <span className="font-semibold text-success">¥3,000/month</span>
            </p>
            <p className="text-xs text-muted-foreground mt-2">
              Available as an add-on during checkout. International calls not included.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
