import { Link } from "@/i18n/navigation";

type RateRow = {
  countryCode: string;
  nameAr: string;
  nameEn: string;
  cpmLinkUsd: number | null;
  cpmFileUsd: number | null;
  cpmUsd: number;
};

export function PublicRateBoard({
  title,
  hint,
  countryLabel,
  cpmLabel,
  locale,
  kind,
  rates,
}: {
  title: string;
  hint: string;
  countryLabel: string;
  cpmLabel: string;
  locale: string;
  kind: "LINK" | "FILE";
  rates: RateRow[];
}) {
  return (
    <section className="card overflow-hidden">
      <div className="border-b border-line p-5">
        <h2 className="text-xl font-bold">{title}</h2>
        <p className="mt-1 text-sm text-muted">{hint}</p>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full min-w-[420px] text-sm">
          <thead className="bg-background text-muted">
            <tr>
              <th className="p-3 text-start">{countryLabel}</th>
              <th className="p-3 text-start">{cpmLabel}</th>
            </tr>
          </thead>
          <tbody>
            {rates.map((rate) => {
              const cpm =
                kind === "FILE"
                  ? Number(rate.cpmFileUsd ?? rate.cpmUsd)
                  : Number(rate.cpmLinkUsd ?? rate.cpmUsd);
              return (
                <tr key={`${kind}-${rate.countryCode}`} className="border-t border-line">
                  <td className="p-3">
                    {rate.countryCode} — {locale === "ar" ? rate.nameAr : rate.nameEn}
                  </td>
                  <td className="p-3 font-medium" dir="ltr">
                    ${cpm.toFixed(2)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </section>
  );
}

export function AdminRateBoard({
  title,
  kind,
  locale,
  countryLabel,
  cpmLabel,
  saveLabel,
  rates,
  action,
}: {
  title: string;
  kind: "LINK" | "FILE";
  locale: string;
  countryLabel: string;
  cpmLabel: string;
  saveLabel: string;
  rates: RateRow[];
  action: (formData: FormData) => Promise<void>;
}) {
  return (
    <section className="card overflow-x-auto">
      <h2 className="p-4 font-semibold">{title}</h2>
      <table className="w-full min-w-[560px] text-sm">
        <thead className="text-muted">
          <tr>
            <th className="p-3 text-start">{countryLabel}</th>
            <th className="p-3 text-start">{cpmLabel}</th>
            <th className="p-3 text-start" />
          </tr>
        </thead>
        <tbody>
          {rates.map((rate) => {
            const value =
              kind === "FILE"
                ? Number(rate.cpmFileUsd ?? rate.cpmUsd)
                : Number(rate.cpmLinkUsd ?? rate.cpmUsd);
            return (
              <tr key={`${kind}-${rate.countryCode}`} className="border-t border-line">
                <td className="p-3">
                  {rate.countryCode} — {locale === "ar" ? rate.nameAr : rate.nameEn}
                </td>
                <td className="p-3" colSpan={2}>
                  <form action={action} className="flex items-center gap-2">
                    <input type="hidden" name="countryCode" value={rate.countryCode} />
                    <input type="hidden" name="kind" value={kind} />
                    <input
                      name="cpmUsd"
                      defaultValue={value}
                      className="w-28 rounded-xl border border-line px-2 py-1"
                    />
                    <button className="text-brand">{saveLabel}</button>
                  </form>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </section>
  );
}

export function PolicyPanel({
  title,
  items,
  moreHref,
  moreLabel,
}: {
  title: string;
  items: { title: string; text: string }[];
  moreHref: string;
  moreLabel: string;
}) {
  return (
    <section className="card p-6 md:p-8">
      <h2 className="text-2xl font-bold">{title}</h2>
      <div className="mt-5 grid gap-4 md:grid-cols-2">
        {items.map((item) => (
          <article key={item.title} className="rounded-2xl border border-line bg-background p-4">
            <h3 className="font-semibold text-brand">{item.title}</h3>
            <p className="mt-2 text-sm leading-7 text-muted">{item.text}</p>
          </article>
        ))}
      </div>
      <Link href={moreHref} className="mt-5 inline-block text-sm text-brand">
        {moreLabel}
      </Link>
    </section>
  );
}