import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import ReferralChart from '@/components/user/default/referral-chart';
import ReferralNode from '@/components/user/default/referral-node';
import ReferralTable from '@/components/user/default/referral-table';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { cn } from '@/lib/utils';
import { SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
import {
  CopyIcon,
  PlusIcon,
  TableIcon,
  TreeStructureIcon,
} from '@phosphor-icons/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

interface ReferralStats {
  total_rewards: number;
  total_referred: number;
  active_traders: number;
}

interface ReferralTreeNode {
  id: number;
  name: string;
  children: ReferralTreeNode[];
}

const Referrals = () => {
  const { t } = useTranslation();
  const { auth, branding } = usePage<SharedData>().props;
  const { format } = useCurrency();

  const [openFaq, setOpenFaq] = useState<number | null>(0);

  const { data: stats } = useApiSWR<ReferralStats>('/user/referrals/stats');
  const { data: treeData, isLoading: treeLoading } =
    useApiSWR<ReferralTreeNode>('/user/referrals/tree');

  const code = (auth?.user?.referral_code as string) ?? '';
  const appName = branding?.branding?.app_name || 'Rewards';
  const origin = typeof window !== 'undefined' ? window.location.origin : '';
  const shareLink = code ? `${origin}/register?referral_code=${code}` : '';
  const shareLabel = shareLink.replace(/^https?:\/\//, '');

  const copy = async (value: string, message: string) => {
    if (!value) {
      toast.error(t('Nothing to copy yet.'));
      return;
    }
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(value);
      } else {
        // Fallback for insecure contexts (e.g. HTTP on a LAN IP) where the
        // async Clipboard API is unavailable.
        const ta = document.createElement('textarea');
        ta.value = value;
        ta.setAttribute('readonly', '');
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        const ok = document.execCommand('copy');
        document.body.removeChild(ta);
        if (!ok) throw new Error('execCommand failed');
      }
      toast.success(t(message));
    } catch {
      toast.error(t('Failed to copy. Please copy it manually.'));
    }
  };

  const statCells = [
    {
      label: t('Sign ups'),
      value: String(stats?.total_referred ?? 0),
    },
    {
      label: t('Active Traders'),
      value: String(stats?.active_traders ?? 0),
    },
    {
      label: t('Earnings'),
      value: format(stats?.total_rewards ?? 0, 'code'),
      active: true,
    },
  ];

  const faqs = [
    {
      q: t('What is the Referral Program?'),
      a: t(
        'Share your unique link with friends. When they sign up and start trading, you earn a share of the platform fees they generate — automatically.',
      ),
    },
    {
      q: t('How much can I earn?'),
      a: t(
        'You earn a percentage of fees from everyone you refer directly, plus a smaller share from indirect referrals across multiple levels. There is no cap on how much you can earn.',
      ),
    },
    {
      q: t('How do I get started?'),
      a: t(
        'Copy your referral link above and share it anywhere — social media, chat, or email. Anyone who signs up through it is automatically linked to your account.',
      ),
    },
    {
      q: t('When are rewards paid out?'),
      a: t(
        'Referral earnings are credited to your balance as your referrals trade. The overview chart refreshes every 30 minutes.',
      ),
    },
  ];

  return (
    <div className="mx-auto space-y-6 py-6">
      {/* Header */}
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0">
          <h1 className="text-3xl font-bold tracking-tight text-card-foreground">
            {t('Referrals')}
          </h1>
          <p className="mt-1.5 max-w-xl text-sm text-black/50 dark:text-white/50">
            {t(
              'Earn a share of fees from direct referrals, and more for every indirect referral across your network.',
            )}
          </p>

          {/* Identity row */}
          <div className="mt-4 flex items-center gap-3">
            <div
              className="size-8 shrink-0 rounded-full"
              style={{
                background:
                  'conic-gradient(from 210deg, #7d3bec, #2696ff, #22c55e, #7d3bec)',
              }}
              aria-hidden
            />
            <span className="truncate font-mono text-sm font-medium text-card-foreground">
              {code || t('No referral code')}
            </span>
          </div>
        </div>

        {/* Share link pill */}
        <button
          type="button"
          onClick={() => copy(shareLink, 'Referral link copied!')}
          className="group flex max-w-full items-center gap-2 rounded-xl border border-black/10 bg-pm-surface px-3.5 py-2.5 text-sm transition-colors hover:border-black/20 dark:border-white/10 dark:hover:border-white/20"
          title={t('Copy referral link')}
        >
          <span className="truncate text-black/70 dark:text-white/70">
            {shareLabel || t('Your referral link')}
          </span>
          <CopyIcon
            weight="bold"
            className="size-4 shrink-0 text-black/40 transition-colors group-hover:text-primary dark:text-white/40"
          />
        </button>
      </div>

      {/* Stat strip + chart */}
      <Card className="gap-0 overflow-hidden rounded-2xl border border-black/8 p-0 dark:border-white/8">
        <div className="grid grid-cols-1 divide-y divide-black/8 sm:grid-cols-3 sm:divide-x sm:divide-y-0 dark:divide-white/8">
          {statCells.map((cell) => (
            <div
              key={cell.label}
              className={cn(
                'border-t-2 px-6 py-5',
                cell.active ? 'border-pm-accent' : 'border-transparent',
              )}
            >
              <p className="text-sm text-black/50 dark:text-white/50">
                {cell.label}
              </p>
              <p
                className={cn(
                  'mt-1 text-3xl font-bold',
                  cell.active
                    ? 'text-card-foreground'
                    : 'text-black/70 dark:text-white/70',
                )}
              >
                {cell.value}
              </p>
            </div>
          ))}
        </div>
        <Separator className="bg-black/8 dark:bg-white/8" />
        <div className="p-5">
          <ReferralChart brand={appName} />
        </div>
      </Card>

      {/* Table + FAQ */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-5">
        <div className="lg:col-span-3">
          <Tabs defaultValue="table" className="gap-0">
            <TabsList className="h-auto w-full justify-start gap-0 rounded-none border-b border-black/8 bg-transparent p-0 dark:border-white/8">
              <TabsTrigger
                value="table"
                className="h-11 gap-2 rounded-none border-b-2 px-5 text-black/50 data-[state=active]:border-card-foreground data-[state=active]:text-card-foreground dark:text-white/50 dark:data-[state=active]:text-card-foreground"
              >
                <TableIcon weight="fill" className="size-4" />
                {t('Referrals')}
              </TabsTrigger>
              <TabsTrigger
                value="tree"
                className="h-11 gap-2 rounded-none border-b-2 px-5 text-black/50 data-[state=active]:border-card-foreground data-[state=active]:text-card-foreground dark:text-white/50 dark:data-[state=active]:text-card-foreground"
              >
                <TreeStructureIcon weight="fill" className="size-4" />
                {t('Tree')}
              </TabsTrigger>
            </TabsList>

            <TabsContent value="table">
              <Card className="gap-0 rounded-2xl rounded-tl-none border border-black/8 p-0 dark:border-white/8">
                <ReferralTable />
              </Card>
            </TabsContent>
            <TabsContent value="tree">
              <Card className="rounded-2xl rounded-tl-none border border-black/8 p-6 dark:border-white/8">
                {!treeLoading && treeData ? (
                  <ReferralNode data={treeData} />
                ) : (
                  <div className="flex h-48 items-center justify-center text-sm text-black/40 dark:text-white/40">
                    {treeLoading
                      ? t('Loading tree...')
                      : t('No referral tree data available.')}
                  </div>
                )}
              </Card>
            </TabsContent>
          </Tabs>
        </div>

        <div className="lg:col-span-2">
          <Card className="h-full rounded-2xl border border-black/8 p-6 dark:border-white/8">
            <div className="mb-3">
              <h2 className="inline-block text-base font-semibold text-card-foreground">
                {t('FAQ')}
              </h2>
              <div className="mt-1 h-0.5 w-6 rounded-full bg-pm-accent" />
            </div>
            <div className="divide-y divide-black/8 dark:divide-white/8">
              {faqs.map((faq, i) => {
                const isOpen = openFaq === i;
                return (
                  <div key={i}>
                    <button
                      type="button"
                      onClick={() => setOpenFaq(isOpen ? null : i)}
                      className="flex w-full items-center justify-between gap-4 py-4 text-left"
                      aria-expanded={isOpen}
                    >
                      <span className="text-sm font-medium text-card-foreground">
                        {faq.q}
                      </span>
                      <PlusIcon
                        weight="bold"
                        className={cn(
                          'size-4 shrink-0 text-black/40 transition-transform duration-200 dark:text-white/40',
                          isOpen && 'rotate-45',
                        )}
                      />
                    </button>
                    <div
                      className={cn(
                        'grid transition-all duration-200',
                        isOpen
                          ? 'grid-rows-[1fr] pb-4 opacity-100'
                          : 'grid-rows-[0fr] opacity-0',
                      )}
                    >
                      <div className="overflow-hidden">
                        <p className="text-sm leading-relaxed text-black/60 dark:text-white/60">
                          {faq.a}
                        </p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

Referrals.title = 'Referrals';

export default Referrals;