"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { MousePointerClick, ShoppingCart, Percent, IndianRupee, Wallet, TrendingUp, Copy, ExternalLink } from "lucide-react";
import { api, auth } from "@/lib/api";
import { PageHeader, StatCard, Card, Skeleton, StatusBadge } from "@/components/ui";
import { useToast } from "@/components/toast";

type Dash = {
  name: string;
  status: string;
  couponCode: string | null;
  couponDiscountType: string | null;
  couponDiscountValue: number | null;
  referralLink: string | null;
  balance: number;
  mlm?: { enabled: boolean; recruitLink?: string; downlineCount?: number; overrideEarnings?: number };
  stats: { clicks: number; sales: number; earnings: number; revenue: number; conversionRate: number };
  orders: { orderId: string; date: string; total: number; commission: number; via: string; status: string }[];
};

const inr = (n: number) => "₹" + Math.round(n).toLocaleString("en-IN");

export default function HomePage() {
  const toast = useToast();
  const [d, setD] = useState<Dash | null>(null);

  const load = useCallback(async () => {
    const id = auth.get()?.id;
    if (!id) return;
    setD(await api.get(`/affiliates/${id}`));
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const copy = (t: string, what: string) => {
    navigator.clipboard?.writeText(t);
    toast.success(`${what} copied.`);
  };

  if (!d) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-40" />
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-3"><Skeleton className="h-24" /><Skeleton className="h-24" /><Skeleton className="h-24" /></div>
      </div>
    );
  }

  if (d.status !== "ACTIVE") {
    return (
      <div>
        <PageHeader title="Home" />
        <Card>
          <div className="flex items-center gap-3">
            <StatusBadge status={d.status} />
            <p className="text-sm text-gray-600">
              Your application is <b>{d.status.toLowerCase()}</b>. Once approved, your referral link and coupon will appear here.
            </p>
          </div>
        </Card>
      </div>
    );
  }

  const link = d.referralLink ?? "";
  const shareText = `Shop with my code ${d.couponCode} and save!`;

  return (
    <div>
      <PageHeader title="Home" subtitle="Your referral performance at a glance" />

      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3">
        <StatCard label="Clicks" value={d.stats.clicks} icon={<MousePointerClick className="h-5 w-5" />} accent="#7c3aed" />
        <StatCard label="Orders" value={d.stats.sales} icon={<ShoppingCart className="h-5 w-5" />} accent="#0891b2" />
        <StatCard label="Conversion" value={`${d.stats.conversionRate.toFixed(1)}%`} icon={<Percent className="h-5 w-5" />} accent="#2563eb" />
        <StatCard label="Sales" value={inr(d.stats.revenue)} icon={<TrendingUp className="h-5 w-5" />} accent="#16a34a" />
        <StatCard label="Earnings" value={inr(d.stats.earnings)} icon={<IndianRupee className="h-5 w-5" />} accent="#1A3C6E" />
        <StatCard label="Balance" value={inr(d.balance)} icon={<Wallet className="h-5 w-5" />} accent="#d97706" />
      </div>

      <div className="mt-4 grid gap-4 lg:grid-cols-2">
        <Card title="Your referral link" subtitle="Share this anywhere you promote">
          <div className="flex gap-2">
            <input readOnly value={link} className="w-full truncate rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-600" />
            <button onClick={() => copy(link, "Link")} className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[var(--brand)] px-3 text-sm font-medium text-white hover:opacity-90">
              <Copy className="h-4 w-4" /> Copy
            </button>
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            <a href={`https://wa.me/?text=${encodeURIComponent(shareText + " " + link)}`} target="_blank" className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50">WhatsApp</a>
            <a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(link)}`} target="_blank" className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50">Share on X</a>
            <a href={link} target="_blank" className="inline-flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50"><ExternalLink className="h-3.5 w-3.5" /> Open</a>
          </div>
        </Card>

        <Card title="Your coupon code" subtitle="Customers who use it earn you commission">
          <div className="flex items-center gap-3">
            <span className="rounded-lg bg-gray-100 px-4 py-2.5 font-mono text-xl font-bold tracking-wider text-gray-900">{d.couponCode}</span>
            <button onClick={() => copy(d.couponCode ?? "", "Coupon")} className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50">
              <Copy className="h-4 w-4" /> Copy
            </button>
          </div>
          {d.couponDiscountValue != null && (
            <p className="mt-3 text-sm text-gray-500">
              Customers get{" "}
              <b className="text-gray-700">{d.couponDiscountType === "FIXED" ? inr(d.couponDiscountValue) : `${d.couponDiscountValue}%`} off</b>{" "}
              with your code.
            </p>
          )}
        </Card>

        {d.mlm?.enabled && (
          <Card title="Recruit &amp; earn more" subtitle="Invite other affiliates — earn a % of everything they sell">
            <div className="mb-3 flex gap-6 text-sm">
              <div><span className="text-gray-500">Your team</span><div className="text-lg font-bold text-gray-900">{d.mlm.downlineCount ?? 0}</div></div>
              <div><span className="text-gray-500">Override earnings</span><div className="text-lg font-bold text-green-600">{inr(d.mlm.overrideEarnings ?? 0)}</div></div>
            </div>
            {d.mlm.recruitLink && (
              <div className="flex items-center gap-2">
                <code className="min-w-0 flex-1 truncate rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-700">{d.mlm.recruitLink}</code>
                <button onClick={() => copy(d.mlm!.recruitLink ?? "", "Recruit link")} className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50"><Copy className="h-4 w-4" /> Copy</button>
              </div>
            )}
          </Card>
        )}
      </div>

      <div className="mt-4">
        <Card title="Recent sales">
          {d.orders.length === 0 ? (
            <p className="py-4 text-center text-sm text-gray-400">No sales yet — share your link or coupon to start earning!</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-xs uppercase tracking-wide text-gray-500">
                  <tr>
                    <th className="pb-2 font-medium">Order</th>
                    <th className="font-medium">Date</th>
                    <th className="font-medium">Order value</th>
                    <th className="font-medium">Commission</th>
                    <th className="text-right font-medium">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {d.orders.map((o) => (
                    <tr key={o.orderId}>
                      <td className="py-2.5 font-mono text-xs text-gray-500">#{o.orderId.slice(-6)}</td>
                      <td className="text-gray-600">{o.date}</td>
                      <td className="text-gray-700">{inr(o.total)}</td>
                      <td className="font-medium text-green-700">{inr(o.commission)}</td>
                      <td className="text-right"><StatusBadge status={o.status} /></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Card>
      </div>

      <p className="mt-6 text-center text-xs text-gray-400">
        Need product-specific links? Go to <Link href="/dashboard/marketing" className="text-[var(--brand)] hover:underline">Marketing</Link>.
      </p>
    </div>
  );
}