"use client";

import React from 'react';
import { get } from '@/api/request';
import { DashboardLayout } from "@/components/layout/dashboard-layout";

/**
 * Share (Invite) Page - Static UI with mocked data.
 * Sections: Invite Flow, My Invitation Code, Invite Records (with pagination)
 */

/**
 * 邀请记录项
 */
type InviteRecord = {
    user_email: string;
    user_id: string;
    user_name: string;
    created_at: number;
    reward_status: number;
    activation_credits: number;
    first_payment_credits: number;
};

/**
 * 分页信息
 */
type PaginationInfo = {
    page: number;
    page_size: number;
    total: number;
    total_pages: number;
    has_next: boolean;
    has_prev: boolean;
};

/**
 * 邀请记录API响应
 */
type InviteRecordsResponse = {
    successful: boolean;
    code: number;
    message: string;
    data: {
        record_list: InviteRecord[];
        pagination: PaginationInfo;
    };
};

const PAGE_SIZE = 10;

/**
 * Format epoch ms using browser preferred language.
 * @param {number} epochMs - timestamp in milliseconds
 * @returns {string} - localized date time string
 */
function formatLocalTime(epochMs: number): string {
    try {
        const locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US';
        const dtf = new Intl.DateTimeFormat(locale, {
            dateStyle: 'medium',
            timeStyle: 'medium',
        });
        return dtf.format(new Date(epochMs));
    } catch {
        return new Date(epochMs).toLocaleString();
    }
}

/**
 * 从后端获取邀请记录
 * @returns {Promise<InviteRecordsResponse>}
 */
async function fetchInviteRecords(): Promise<InviteRecordsResponse> {
    const res = await get<InviteRecordsResponse>('/api/user_fission/query_invite_record');
    return res;
}

export default function SharePage(): JSX.Element {
    // Mocked data (to be replaced by real API integration later)
    const [inviteCode, setInviteCode] = React.useState<string>('');
    const [invitedCount, setInvitedCount] = React.useState<number>(0);
    const [totalInviteCredits, setTotalInviteCredits] = React.useState<number>(0);
    const [copyState, setCopyState] = React.useState<'idle' | 'copied' | 'error'>('idle');

    const [records, setRecords] = React.useState<InviteRecord[]>([]);
    const [pagination, setPagination] = React.useState<PaginationInfo>({
        page: 1,
        page_size: 20,
        total: 0,
        total_pages: 1,
        has_next: false,
        has_prev: false
    });
    const [pageIndex, setPageIndex] = React.useState<number>(0);
    const [expandedRowIds, setExpandedRowIds] = React.useState<Set<string>>(() => new Set());

    React.useEffect(() => {
        let mounted = true;
        
        // 并行发起所有请求，每个请求完成后立即处理
        const fetchRecords = async () => {
            try {
                const response = await fetchInviteRecords();
                if (!mounted) return; // 早期返回检查
                if (response.successful) {
                    setRecords(response.data.record_list);
                    setPagination(response.data.pagination);
                }
            } catch (error) {
                if (mounted) {
                    console.warn('Failed to fetch invite records:', error);
                }
            }
        };

        const fetchStats = async () => {
            try {
                const res = await get<any>('/api/user_fission/my_invite_stats');
                if (!mounted) return; // 早期返回检查
                const stats = res?.data ?? {};
                if (typeof stats.total_invited === 'number') {
                    setInvitedCount(stats.total_invited);
                }
                if (typeof stats.total_invite_credits === 'number') {
                    setTotalInviteCredits(stats.total_invite_credits);
                }
            } catch (error) {
                if (mounted) {
                    console.warn('Failed to fetch invite stats:', error);
                }
            }
        };

        const fetchInviteCode = async () => {
            try {
                const res = await get<any>('/api/user_fission/my_invite_code');
                if (!mounted) return; // 早期返回检查
                const code = res?.data?.invite_code ?? res?.data?.inviteCode ?? '';
                if (typeof code === 'string') {
                    setInviteCode(code);
                }
            } catch (error) {
                if (mounted) {
                    console.warn('Failed to fetch invite code:', error);
                }
            }
        };

        // 并行发起所有请求，每个请求完成后立即处理响应
        fetchRecords();
        fetchStats();
        fetchInviteCode();

        return () => {
            mounted = false;
        };
    }, []);

    const totalPages = pagination.total_pages;
    const pagedRecords = records; // 后端已经分页，直接使用records

    const handleCopy = React.useCallback(async () => {
        try {
            await navigator.clipboard.writeText(location.origin + '/signup?inviteCode=' + inviteCode);
            setCopyState('copied');
            window.setTimeout(() => setCopyState('idle'), 1600);
        } catch {
            setCopyState('error');
            window.setTimeout(() => setCopyState('idle'), 1600);
        }
    }, [inviteCode]);


    const toggleRow = React.useCallback((id: string) => {
        setExpandedRowIds((prev: Set<string>) => {
            const next = new Set(prev);
            if (next.has(id)) {
                next.delete(id);
            } else {
                next.add(id);
            }
            return next;
        });
    }, []);

    return (
        <DashboardLayout>
            <div data-alt="share-page" className="w-full h-full overflow-y-auto overflow-x-hidden bg-black text-white">
                <div
                    data-alt="container"
                    className="w-full max-w-[100%] mx-auto px-4 py-2 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"
                >
                    <header data-alt="page-header" className="mb-8 flex items-end justify-between">
                        <div data-alt="title-box">
                            <h1 data-alt="title" className="text-2xl font-semibold text-white">Invite Friends</h1>
                            <p data-alt="subtitle" className="mt-1 text-sm text-white/60">Invite friends to join and earn rewards.</p>
                        </div>
                    </header>
                {/* Section 1: My Invitation Link */}
                <section data-alt="my-invite-link" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
                    <div data-alt="link-panel" className="mt-4 grid gap-6 sm:grid-cols-4">
                        <div data-alt="link-box" className="sm:col-span-2">
                            <h2 data-alt="section-title" className="text-lg font-medium text-white">My Invitation Link</h2>
                            <div className="flex items-center gap-3">
                                <div data-alt="link-container" className="relative w-full max-w-2xl overflow-hidden rounded-md border border-white/20 bg-white/10">
                                    <div 
                                        data-alt="link-content" 
                                        className="relative px-4 py-2 text-xs sm:text-sm font-mono text-white/90 break-all sm:truncate"
                                    >
                                        {inviteCode ? `${'https://www.movieflow.ai'}/signup?inviteCode=${inviteCode}` : '-'}
                                    </div>
                                    {/* 右侧渐变遮挡 */}
                                    <div 
                                        data-alt="right-mask" 
                                        className="absolute right-0 top-0 h-full w-16 bg-gradient-to-l from-black/80 to-transparent pointer-events-none"
                                    />
                                </div>
                                <button
                                    data-alt="copy-button"
                                    className="inline-flex h-9 items-center justify-center rounded-full bg-gradient-to-r from-custom-blue to-custom-purple px-3 text-sm font-medium text-black/90 hover:opacity-90 active:translate-y-px flex-shrink-0"
                                    onClick={handleCopy}
                                    type="button"
                                    aria-label="Copy invitation link"
                                >
                                    {copyState === 'copied' ? 'Copied' : copyState === 'error' ? 'Failed' : 'Copy'}
                                </button>
                            </div>
                            <p data-alt="hint" className="mt-2 text-xs text-white/60">Share this link. Your friends can register directly through it.</p>
                        </div>
                        <div data-alt="total-credits" className="flex flex-col items-start justify-center rounded-md border border-white/20 bg-white/5 p-4">
                            <span className="text-sm text-white/70">Total Credits</span>
                            <span className="mt-1 text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-custom-blue to-custom-purple">{totalInviteCredits}</span>
                            <span className="mt-2 text-xs text-white/60">All credits earned from invitations.</span>
                        </div>
                        <div data-alt="invited-count" className="flex flex-col items-start justify-center rounded-md border border-white/20 bg-white/5 p-4">
                            <span className="text-sm text-white/70">Invited Friends</span>
                            <span className="mt-1 text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-custom-blue to-custom-purple">{invitedCount}</span>
                            <span className="mt-2 text-xs text-white/60">Point details will be available soon.</span>
                        </div>
                    </div>
                </section>

                {/* Section 2: Invite Flow - Two Columns (Left: Steps, Right: Rules) */}
                <section data-alt="invite-flow" className="mb-8 rounded-lg border border-white/20 bg-black p-6 shadow-sm">
                    <div data-alt="two-col-wrapper" className="mt-4 grid grid-cols-1 gap-6 md:grid-cols-[30%_1fr]">
                        {/* Left: Steps */}
                        <div data-alt="steps-col" className="space-y-4">
                    <h2 data-alt="section-title" className="text-lg font-medium text-white">Invitation Flow</h2>
                            <ol data-alt="steps" className="space-y-4">
                                <li data-alt="step" className="rounded-md p-4">
                                    <div data-alt="step-header" className="flex items-center justify-between">
                                        <span className="text-sm font-medium text-custom-blue/50">Step 1</span>
                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Share</span>
                                    </div>
                                    <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Copy your invitation link and share it with friends.</p>
                                </li>
                                <li data-alt="step" className="rounded-md p-4">
                                    <div data-alt="step-header" className="flex items-center justify-between">
                                        <span className="text-sm font-medium text-custom-blue/50">Step 2</span>
                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Register</span>
                                    </div>
                                    <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Friends click the link and register directly.</p>
                                </li>
                                <li data-alt="step" className="rounded-md p-4">
                                    <div data-alt="step-header" className="flex items-center justify-between">
                                        <span className="text-sm font-medium text-custom-blue/50">Step 3</span>
                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Reward</span>
                                    </div>
                                    <p data-alt="step-desc" className="mt-2 text-sm text-white/70">You will receive <strong>500 credits</strong> after your friends successfully sign in.</p>
                                </li>
                            </ol>
                        </div>
                        {/* Right: Rules */}
                        <div data-alt="rules-col" className="rounded-md">
                            <h2 data-alt="section-title" className="text-lg font-medium text-white mb-4">MovieFlow Credits Rewards Program</h2>
                            <div className='p-4 space-y-4'>
                                <p className="text-sm">
                                    Welcome to MovieFlow! Our Credits Program is designed to reward your growth and contributions.
                                    <br />
                                    Credits can be redeemed for <strong>watermark</strong> removal.
                                    <br />
                                    In the future, credits may be used to redeem advanced template features.
                                </p>
                                
                                <div className="content">
                                    <h2 className="text-medium font-medium text-white">How to Earn Credits?</h2>
                                    
                                    <div className="reward-section welcome">
                                        <h3 className="text-medium font-medium text-white">Invite & Earn</h3>
                                        <p className='text-sm'>Invite friends to join using your unique referral link.</p>
                                        <p className='text-sm'>You will get <strong>500 credits</strong> once they successfully sign in.</p>
                                        <br />
                                        <p className='text-sm'>When your invited friends complete their first purchase, you will receive <strong>a 20% share of the credits</strong> they earn from that purchase.</p>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </section>
                {/* Section 3: Invite Records */}
                <section data-alt="invite-records" className="rounded-lg border border-white/20 bg-black p-6 shadow-sm">
                    <div data-alt="section-header" className="mb-4 flex items-center justify-between">
                        <h2 data-alt="section-title" className="text-lg font-medium text-white">Invite Records</h2>
                        <div data-alt="pagination" className="flex items-center gap-2">
                            <button
                                data-alt="prev-page"
                                className="inline-flex h-6 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                                type="button"
                                onClick={() => setPageIndex((p: number) => Math.max(0, p - 1))}
                                disabled={!pagination.has_prev}
                                aria-label="Previous page"
                            >
                                Prev
                            </button>
                            <span data-alt="page-info" className="text-sm text-white/70">
                                {pagination.page} / {pagination.total_pages}
                            </span>
                            <button
                                data-alt="next-page"
                                className="inline-flex h-6 items-center justify-center rounded border border-gray-300 bg-white px-2 text-sm text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
                                type="button"
                                onClick={() => setPageIndex((p: number) => Math.min(totalPages - 1, p + 1))}
                                disabled={!pagination.has_next}
                                aria-label="Next page"
                            >
                                Next
                            </button>
                        </div>
                    </div>

                    <div data-alt="table-wrapper" className="overflow-x-auto">
                        <table data-alt="records-table" className="min-w-full divide-y divide-white/10 table-fixed">
                            <thead data-alt="table-head" className="bg-black">
                                <tr data-alt="table-head-row">
                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 sm:w-48">Invited Username</th>
                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 sm:w-56">Registered At</th>
                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">Reward</th>
                                </tr>
                            </thead>
                            <tbody data-alt="table-body" className="divide-y divide-white/10 bg-black">
                                {pagedRecords.map((r: any) => {
                                    const inviteRewardDisplay = r.reward_status === 1 ? r.activation_credits : 0;
                                    const payRewardDisplay = r.first_payment_credits;
                                    const totalReward = inviteRewardDisplay + payRewardDisplay;
                                    const isExpanded = expandedRowIds.has(r.user_id);
                                    return (
                                        <React.Fragment key={r.user_id}>
                                            <tr data-alt="table-row" className="hover:bg-white/5">
                                                <td className="px-4 py-3 text-sm text-white sm:w-48">{r.user_name}</td>
                                                <td className="px-4 py-3 text-sm text-white/80 whitespace-nowrap sm:w-56">{formatLocalTime(r.created_at * 1000)}</td>
                                                <td className="px-4 py-3 text-sm text-white/90">
                                                    <div data-alt="reward-cell" className="flex items-center justify-between gap-3">
                                                        <div data-alt="reward-summary" className="flex-1 truncate text-[#FFCC6D]">
                                                            {totalReward}
                                                        </div>
                                                        <button
                                                            type="button"
                                                            data-alt="expand-button"
                                                            className="inline-flex items-center rounded border border-white/20 px-2 py-1 text-xs text-white/90 hover:bg-white/10"
                                                            aria-expanded={isExpanded}
                                                            aria-label={isExpanded ? 'Collapse reward details' : 'Expand reward details'}
                                                            onClick={() => toggleRow(r.user_id)}
                                                        >
                                                            {isExpanded ? 'Hide' : 'Details'}
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            {isExpanded && (
                                                <tr data-alt="row-details">
                                                    <td className="px-4 py-0 sm:w-48" />
                                                    <td className="px-4 py-0 sm:w-56" />
                                                    <td className="px-4 py-3 bg-white/5">
                                                        <div data-alt="details-wrapper" className="overflow-x-auto">
                                                            <table data-alt="reward-subtable" className="min-w-[320px] text-sm">
                                                                <tbody data-alt="subtable-body" className="text-white/90">
                                                                    <tr>
                                                                        <td className="px-2 py-2">{inviteRewardDisplay ? inviteRewardDisplay : 'Unverified'}</td>
                                                                        <td className="px-2 py-2">Register Reward</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td className="px-2 py-2">{payRewardDisplay ? payRewardDisplay : 'Unpaid'}</td>
                                                                        <td className="px-2 py-2">First Payment Reward</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                            )}
                                        </React.Fragment>
                                    );
                                })}
                            </tbody>
                        </table>
                    </div>
                </section>
                </div>
            </div>
        </DashboardLayout>
    );
}