import {VStack} from '@astryxdesign/core/Layout';
import {Badge} from '@astryxdesign/core/Badge';
import {Text} from '@astryxdesign/core/Text';
import {Divider} from '@astryxdesign/core/Divider';
import {PageHeader} from '@/components/primitives/PageHeader';
import {StaticPanel} from '@/components/patterns/PanelCard';
import {StatPair, StatRow} from '@/components/patterns/StatPair';
import {EmptyPanel} from '@/components/patterns/EmptyPanel';
import {readProfile} from '@/lib/mock/settings';
import {formatInr} from '@/lib/format';

/**
 * Billing is read-only for now.
 *
 * The plan and settlement figures are real shapes, but there is no payment
 * provider wired up — so rather than render fake "Change plan" flows that do
 * nothing, the actions are absent and the invoice list says plainly that it
 * is not connected yet. A disabled button that never becomes enabled is worse
 * than no button.
 */
export default function SettingsBillingPage() {
  const profile = readProfile();

  return (
    <VStack gap={5}>
      <PageHeader
        title="Billing"
        description="Plan, LYT settlement and invoices."
      />

      <StaticPanel
        title="Plan"
        subtitle={profile.businessName}
        actions={<Badge variant="success" label="Active" />}
      >
        <VStack gap={4}>
          <StatRow>
            <StatPair label="Plan" value="Growth — 5 stores" />
            <StatPair label="Billed" value="Monthly" />
            <StatPair label="Next charge" value="1 Sep 2026" />
            <StatPair label="Amount" value={formatInr(14999)} align="end" />
          </StatRow>
          <Divider />
          <Text size="sm" color="secondary">
            LYTs are settled monthly against redemptions, at 1 LYT = ₹1. Your
            outstanding liability is shown on the Lyts page.
          </Text>
        </VStack>
      </StaticPanel>

      <StaticPanel title="Invoices" subtitle="Past statements">
        <EmptyPanel
          icon="revenue"
          title="No billing provider connected"
          description="Invoices appear here once payments are wired up."
        />
      </StaticPanel>
    </VStack>
  );
}