'use client';
import Dropdown from '@/components/dropdown';
import IconHorizontalDots from '@/components/icon/icon-horizontal-dots';
import { IRootState } from '@/store';
import React from 'react';
import { useSelector } from 'react-redux';

import { useSubscription } from '@/components/billing/subscription-context';

const ComponentsUsersProfilePaymentHistory = () => {
    const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';

    const { isEntitled, isTrialActive, daysLeftInTrial, startTrial, purchase } = useSubscription();

    if (!isEntitled) {
        return (
            <div className="panel">
                <div className="mb-3 flex items-center justify-between">
                    <h5 className="text-lg font-semibold dark:text-white-light">Payment History</h5>
                </div>
                <div className="rounded-md border border-dashed border-[#ebedf2] bg-white p-6 text-center dark:border-[#1b2e4b] dark:bg-black">
                    <p className="mb-2 text-sm text-gray-600">
                        Payment history is available once you activate a subscription.
                    </p>
                    <div className="mt-3 flex flex-wrap items-center justify-center gap-3">
                        {!isTrialActive && (
                            <button
                                onClick={() => startTrial(7)}
                                className="btn btn-dark"
                            >
                                Start 7-day Free Trial
                            </button>
                        )}
                        <button
                            onClick={purchase}
                            className="btn btn-primary"
                        >
                            Purchase Subscription
                        </button>
                    </div>
                    <p className="mt-3 text-xs text-gray-500">
                        You can manage your plan in <span className="font-medium">Account Settings → Payment Details</span>.
                    </p>
                </div>
            </div>
        );
    }

    // entitled users see the original history UI
    return (
        <div className="panel">
            <div className="mb-5 flex items-center justify-between">
                <h5 className="text-lg font-semibold dark:text-white-light">Payment History</h5>
            </div>
            <div>
                <div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
                    <div className="flex items-center justify-between py-2">
                        <h6 className="font-semibold text-[#515365] dark:text-white-dark">
                            March
                            <span className="block text-white-dark dark:text-white-light">Pro Membership</span>
                        </h6>
                        <div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
                            <p className="font-semibold">90%</p>
                            <div className="dropdown ltr:ml-4 rtl:mr-4">
                                <Dropdown
                                    offset={[0, 5]}
                                    placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                    btnClassName="hover:text-primary"
                                    button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}
                                >
                                    <ul className="!min-w-[150px]">
                                        <li>
                                            <button type="button">View Invoice</button>
                                        </li>
                                        <li>
                                            <button type="button">Download Invoice</button>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="border-b border-[#ebedf2] dark:border-[#1b2e4b]">
                    <div className="flex items-center justify-between py-2">
                        <h6 className="font-semibold text-[#515365] dark:text-white-dark">
                            February
                            <span className="block text-white-dark dark:text-white-light">Pro Membership</span>
                        </h6>
                        <div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
                            <p className="font-semibold">90%</p>
                            <div className="dropdown ltr:ml-4 rtl:mr-4">
                                <Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
                                    <ul className="!min-w-[150px]">
                                        <li>
                                            <button type="button">View Invoice</button>
                                        </li>
                                        <li>
                                            <button type="button">Download Invoice</button>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div className="flex items-center justify-between py-2">
                        <h6 className="font-semibold text-[#515365] dark:text-white-dark">
                            January
                            <span className="block text-white-dark dark:text-white-light">Pro Membership</span>
                        </h6>
                        <div className="flex items-start justify-between ltr:ml-auto rtl:mr-auto">
                            <p className="font-semibold">90%</p>
                            <div className="dropdown ltr:ml-4 rtl:mr-4">
                                <Dropdown offset={[0, 5]} placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`} button={<IconHorizontalDots className="opacity-80 hover:opacity-100" />}>
                                    <ul className="!min-w-[150px]">
                                        <li>
                                            <button type="button">View Invoice</button>
                                        </li>
                                        <li>
                                            <button type="button">Download Invoice</button>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ComponentsUsersProfilePaymentHistory;