"use client";

import { BanknotesIcon, UsersIcon, ArrowPathIcon } from "@heroicons/react/24/outline";

const fees = [
  {
    title: "Activation Fee",
    amount: 1500,
    type: "one-time" as const,
    description: "Required for all new SIM activations",
    icon: BanknotesIcon,
  },
  {
    title: "SIM Reissue",
    amount: 1500,
    type: "one-time" as const,
    description: "For lost, damaged, or replacement SIM cards",
    icon: ArrowPathIcon,
  },
  {
    title: "eSIM Re-download",
    amount: 1500,
    type: "one-time" as const,
    description: "If eSIM download is interrupted or deleted",
    icon: ArrowPathIcon,
  },
];

const discounts = [
  {
    title: "Multi-SIM Discount",
    amount: -300,
    type: "monthly" as const,
    description: "Per additional Voice SIM on your account",
    icon: UsersIcon,
  },
];

export function SimFees() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* One-time Fees */}
      <div className="bg-card border border-border rounded-2xl p-6">
        <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
          <BanknotesIcon className="w-5 h-5 text-warning" />
          One-time Fees
        </h3>

        <div className="space-y-4">
          {fees.map(fee => (
            <div
              key={fee.title}
              className="flex items-start gap-3 pb-4 border-b border-border last:border-0 last:pb-0"
            >
              <div className="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center flex-shrink-0">
                <fee.icon className="w-5 h-5 text-warning" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-baseline justify-between gap-2">
                  <h4 className="font-medium text-foreground">{fee.title}</h4>
                  <span className="font-bold text-foreground whitespace-nowrap">
                    ¥{fee.amount.toLocaleString()}
                  </span>
                </div>
                <p className="text-sm text-muted-foreground mt-0.5">{fee.description}</p>
              </div>
            </div>
          ))}
        </div>

        <p className="text-xs text-muted-foreground mt-4 pt-4 border-t border-border">
          All prices exclude 10% consumption tax
        </p>
      </div>

      {/* Discounts */}
      <div className="bg-card border border-border rounded-2xl p-6">
        <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
          <UsersIcon className="w-5 h-5 text-success" />
          Available Discounts
        </h3>

        <div className="space-y-4">
          {discounts.map(discount => (
            <div
              key={discount.title}
              className="flex items-start gap-3 p-4 bg-success/5 border border-success/20 rounded-xl"
            >
              <div className="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center flex-shrink-0">
                <discount.icon className="w-5 h-5 text-success" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-baseline justify-between gap-2">
                  <h4 className="font-medium text-foreground">{discount.title}</h4>
                  <span className="font-bold text-success whitespace-nowrap">
                    ¥{discount.amount.toLocaleString()}/mo
                  </span>
                </div>
                <p className="text-sm text-muted-foreground mt-0.5">{discount.description}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-6 p-4 bg-muted/50 rounded-lg">
          <h4 className="font-medium text-foreground text-sm mb-2">First Month Free</h4>
          <p className="text-sm text-muted-foreground">
            Basic fee from sign-up day to end of month is waived. Billing starts on the 1st of the
            following month.
          </p>
        </div>
      </div>
    </div>
  );
}
