import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getCreditBalance, CreditBalance } from '../../services/billing.api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { ArrowUpIcon } from '../../icons';
import { usePageLoading } from '../../context/PageLoadingContext';

export default function Credits() {
  const toast = useToast();
  const { startLoading, stopLoading } = usePageLoading();
  const [balance, setBalance] = useState<CreditBalance | null>(null);

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

  const loadBalance = async () => {
    try {
      startLoading('Loading content usage...');
      const data = await getCreditBalance();
      setBalance(data);
    } catch (error: any) {
      toast.error(`Failed to load content usage: ${error.message}`);
    } finally {
      stopLoading();
    }
  };

  return (
    <>
      <PageMeta title="Content Usage" />
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Content Usage</h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">Track your monthly content allowance</p>
        </div>
        <Link to="/account/plans">
          <Button variant="primary" startIcon={<ArrowUpIcon className="w-4 h-4" />}>
            Manage Plan
          </Button>
        </Link>
      </div>

      {balance && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Content Remaining</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {(balance?.credits ?? 0).toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Pieces available this month</p>
          </Card>

          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Plan</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {(balance as any)?.subscription_plan || 'None'}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
              {(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} content pieces/month` : 'No subscription'}
            </p>
          </Card>

          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
            </div>
            <div className="mt-2">
                <Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
                  {(balance as any)?.subscription_status || 'No subscription'}
                </Badge>
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
          </Card>
        </div>
      )}

      {/* What's Included */}
      <div className="mt-8">
        <Card className="p-6">
          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">What's Included Per Content Piece</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Every content piece you create includes all of these features
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { name: 'AI Keyword Clustering', desc: 'Smart keyword grouping' },
              { name: 'AI Content Ideas', desc: 'Topic suggestions from keywords' },
              { name: 'AI Content Writing', desc: '1000-2000 word articles' },
              { name: 'AI Images', desc: '1 featured + 2 in-article images' },
              { name: 'Internal Linking', desc: 'Smart link suggestions' },
              { name: 'SEO Optimization', desc: 'Meta tags & readability' },
              { name: 'Publishing to your sites', desc: 'Direct publish to your site' },
              { name: 'Multiple Formats', desc: 'Pages, articles, product content' },
            ].map((feature) => (
              <div key={feature.name} className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                <div className="w-5 h-5 rounded-full bg-success-100 dark:bg-success-900 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <svg className="w-3 h-3 text-success-600 dark:text-success-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div>
                  <div className="font-medium text-gray-900 dark:text-white">{feature.name}</div>
                  <div className="text-sm text-gray-600 dark:text-gray-400">{feature.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </>
  );
}