"use client";

import { CheckCircle, Tag } from "@/lib/icons";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PLAN_CATALOG } from "@/lib/appwrite/subscription-types";
import type { PaymentEvent } from "@/lib/appwrite/schema";

const PROVIDER_LABELS: Record<string, string> = {
  paytr: "PayTR",
  polar: "Polar",
  shopier: "Shopier",
  mock: "Test",
};

export function PaymentHistory({ events }: { events: PaymentEvent[] }) {
  if (events.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Ödeme Geçmişi</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">Henüz ödeme kaydı bulunmuyor.</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Ödeme Geçmişi</CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <div className="divide-y">
          {events.map((event) => {
            const planEntry = PLAN_CATALOG[event.plan as keyof typeof PLAN_CATALOG];
            const periodLabel = event.period === "yearly" ? "Yıllık" : "Aylık";
            const date = new Date(event.$createdAt).toLocaleDateString("tr-TR", {
              day: "2-digit",
              month: "long",
              year: "numeric",
            });

            return (
              <div
                key={event.$id}
                className="flex items-center justify-between px-6 py-3.5 text-sm"
              >
                <div className="flex items-center gap-3">
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-500/10 text-green-600 shrink-0">
                    <CheckCircle className="h-4 w-4" />
                  </div>
                  <div>
                    <div className="font-medium">
                      {planEntry?.name ?? event.plan} — {periodLabel}
                    </div>
                    <div className="text-muted-foreground text-xs flex items-center gap-1.5 mt-0.5">
                      <span>{date}</span>
                      <span>·</span>
                      <span>{PROVIDER_LABELS[event.provider] ?? event.provider}</span>
                      {event.discountCode && (
                        <>
                          <span>·</span>
                          <span className="flex items-center gap-0.5">
                            <Tag className="h-3 w-3" />
                            {event.discountCode}
                          </span>
                        </>
                      )}
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <Badge variant="outline" className="text-green-600 border-green-500/30 bg-green-500/5">
                    {event.amount.toLocaleString("tr-TR")} ₺
                  </Badge>
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}
