"use client";
import React, { useState } from "react";
import { DollarSign, TrendingUp, Clock, ArrowUpRight, Wallet } from "lucide-react";
import { EmptyState } from "@/components/marketplace/common/EmptyState";
import { formatPrice, formatDate } from "@/utils/marketplace";
import { useAppSelector } from "@/store/hooks";

type Period = "week" | "month" | "year";

const PERIODS: { value: Period; label: string }[] = [
  { value: "week", label: "This Week" },
  { value: "month", label: "This Month" },
  { value: "year", label: "This Year" },
];

export function SellerEarnings() {
  const [period, setPeriod] = useState<Period>("month");
  const currencyCode = useAppSelector((s) => s.generalSetting.currencyCode);

  return (
    <div className="p-4 md:p-6 max-w-6xl mx-auto">
      <div className="mb-6">
        <h1 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
          Earnings
        </h1>
        <p className="text-sm mt-0.5" style={{ color: "var(--text-muted)" }}>
          Track your marketplace revenue
        </p>
      </div>

      {/* Period selector */}
      <div className="flex gap-2 mb-5">
        {PERIODS.map((p) => (
          <button
            key={p.value}
            onClick={() => setPeriod(p.value)}
            className="px-3 py-1.5 rounded-xl text-xs font-medium"
            style={{
              background: period === p.value ? "var(--accent)" : "var(--card)",
              color: period === p.value ? "#fff" : "var(--text-muted)",
              border: `1px solid ${period === p.value ? "var(--accent)" : "var(--border)"}`,
            }}
          >
            {p.label}
          </button>
        ))}
      </div>

      {/* Summary cards */}
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
        {[
          { label: "Gross Earnings", value: `${currencyCode}0`, icon: TrendingUp, color: "#22c55e" },
          { label: "Platform Fee", value: `${currencyCode}0`, icon: ArrowUpRight, color: "#f59e0b" },
          { label: "Net Earnings", value: `${currencyCode}0`, icon: DollarSign, color: "#6366f1" },
          { label: "Pending", value: `${currencyCode}0`, icon: Clock, color: "#f97316" },
          { label: "Paid Out", value: `${currencyCode}0`, icon: Wallet, color: "#22c55e" },
        ].map((card) => (
          <div
            key={card.label}
            className="p-4 rounded-2xl"
            style={{ background: "var(--card)", border: "1px solid var(--border)" }}
          >
            <div
              className="w-8 h-8 rounded-xl flex items-center justify-center mb-3"
              style={{ background: `${card.color}18` }}
            >
              <card.icon size={16} color={card.color} />
            </div>
            <p className="text-lg font-bold" style={{ color: "var(--text-primary)" }}>
              {card.value}
            </p>
            <p className="text-xs mt-0.5" style={{ color: "var(--text-muted)" }}>
              {card.label}
            </p>
          </div>
        ))}

        {/* Withdraw button card */}
        <div
          className="p-4 rounded-2xl flex flex-col items-center justify-center gap-2 cursor-pointer hover:opacity-90"
          style={{ background: "var(--accent)" }}
        >
          <Wallet size={20} color="#fff" />
          <p className="text-sm font-semibold text-white">Withdraw</p>
        </div>
      </div>

      {/* Transactions */}
      <h2 className="text-sm font-semibold mb-3" style={{ color: "var(--text-primary)" }}>
        Transaction History
      </h2>
      <EmptyState
        icon={DollarSign}
        title="No transactions yet"
        description="Completed sales will appear here with your earnings breakdown."
      />
    </div>
  );
}