'use client';

import {useState} from 'react';
import {proportional, pixel} from '@astryxdesign/core/Table';
import {ResponsiveTable} from '@/shared/components/patterns/ResponsiveTable';
import type {TableColumn} from '@astryxdesign/core/Table';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';
import {Divider} from '@astryxdesign/core/Divider';
import {ProgressBar} from '@astryxdesign/core/ProgressBar';
import {TextInput} from '@astryxdesign/core/TextInput';
import {useToast} from '@astryxdesign/core/Toast';
import {StaticPanel} from '@/shared/components/patterns/PanelCard';
import {StatPair, StatRow} from '@/shared/components/patterns/StatPair';
import {formatInr} from '@/shared/utils/format';

export interface InvoiceItem extends Record<string, unknown> {
  id: string;
  date: string;
  amount: number;
  status: 'paid' | 'pending';
  downloadUrl: string;
}

const INVOICES: InvoiceItem[] = [
  {
    id: 'INV-2026-008',
    date: '1 Aug 2026',
    amount: 14999,
    status: 'paid',
    downloadUrl: '#',
  },
  {
    id: 'INV-2026-007',
    date: '1 Jul 2026',
    amount: 14999,
    status: 'paid',
    downloadUrl: '#',
  },
  {
    id: 'INV-2026-006',
    date: '1 Jun 2026',
    amount: 14999,
    status: 'paid',
    downloadUrl: '#',
  },
];

import {DownloadDropdown} from '@/shared/components/patterns/DownloadDropdown';

export function BillingOverview() {
  const toast = useToast();
  const [bankAccount, setBankAccount] = useState('HDFC Bank •••• 8842');
  const [ifsc, setIfsc] = useState('HDFC0001234');
  const [isUpdatingBank, setIsUpdatingBank] = useState(false);

  const handleUpdateBank = () => {
    setIsUpdatingBank(true);
    setTimeout(() => {
      setIsUpdatingBank(false);
      toast({body: 'Settlement bank account details updated'});
    }, 400);
  };

  const columns: TableColumn<InvoiceItem>[] = [
    {
      key: 'id',
      header: 'Invoice ID',
      width: proportional(1.5),
      renderCell: (row) => (
        <Text size="sm" weight="medium">
          {row.id}
        </Text>
      ),
    },
    {
      key: 'date',
      header: 'Billed Date',
      width: proportional(1.2),
      renderCell: (row) => (
        <Text size="sm" color="secondary">
          {row.date}
        </Text>
      ),
    },
    {
      key: 'amount',
      header: 'Amount',
      width: proportional(1.2),
      renderCell: (row) => (
        <Text size="sm" weight="medium">
          {formatInr(row.amount)}
        </Text>
      ),
    },
    {
      key: 'status',
      header: 'Status',
      width: pixel(110),
      renderCell: (row) => (
        <Badge
          variant={row.status === 'paid' ? 'success' : 'warning'}
          label={row.status}
        />
      ),
    },
    {
      key: 'actions',
      header: 'Statement',
      align: 'end',
      width: pixel(180),
      renderCell: (row) => (
        <HStack hAlign="end">
          <DownloadDropdown
            filename={`Invoice_${row.id}`}
            title={`Invoice Statement ${row.id}`}
            subtitle={`Billed Date: ${row.date} • Amount: ₹${row.amount}`}
            columns={[
              {key: 'id', header: 'Invoice ID'},
              {key: 'date', header: 'Billed Date'},
              {key: 'amount', header: 'Amount (₹)'},
              {key: 'status', header: 'Payment Status'},
            ]}
            data={[row]}
            variant="primary"
          />
        </HStack>
      ),
    },
  ];

  return (
    <VStack gap={5}>
      <StaticPanel
        title="Subscription & Quota Usage"
        subtitle="Enterprise Growth Plan details, active limit quotas and payment instruments."
        actions={<Badge variant="success" label="Subscription Active" />}
      >
        <VStack gap={4}>
          <StatRow>
            <StatPair label="Active Plan" value="Growth Enterprise" />
            <StatPair label="Billing Frequency" value="Monthly" />
            <StatPair label="Next Renewal" value="1 Sep 2026" />
            <StatPair label="Recurring Amount" value={formatInr(14999)} align="end" />
          </StatRow>

          <Divider />

          <VStack gap={3}>
            <Heading level={3}>Usage Quotas</Heading>
            <VStack gap={2}>
              <HStack hAlign="between" vAlign="center">
                <Text size="sm">Store Locations (5 of 10 used)</Text>
                <Text size="sm" weight="medium">
                  50%
                </Text>
              </HStack>
              <ProgressBar value={50} max={100} label="Usage" isLabelHidden hasValueLabel={false} />
            </VStack>

            <VStack gap={2}>
              <HStack hAlign="between" vAlign="center">
                <Text size="sm">Staff User Seats (5 of 15 used)</Text>
                <Text size="sm" weight="medium">
                  33%
                </Text>
              </HStack>
              <ProgressBar value={33} max={100} label="Usage" isLabelHidden hasValueLabel={false} />
            </VStack>

            <VStack gap={2}>
              <HStack hAlign="between" vAlign="center">
                <Text size="sm">API Calls / Month (142,500 of 500,000)</Text>
                <Text size="sm" weight="medium">
                  28.5%
                </Text>
              </HStack>
              <ProgressBar value={28.5} max={100} label="Usage" isLabelHidden hasValueLabel={false} />
            </VStack>
          </VStack>
        </VStack>
      </StaticPanel>

      <StaticPanel
        title="LYT Settlement Bank Details"
        subtitle="LYTs redeemed at store counters are settled directly into your registered bank account (1 LYT = ₹1)."
        actions={
          <Button
            variant="secondary"
            size="sm"
            label="Save Bank Info"
            isLoading={isUpdatingBank}
            onClick={handleUpdateBank}
          />
        }
      >
        <VStack gap={4}>
          <HStack gap={4} wrap="wrap">
            <TextInput
              label="Settlement Bank & Account"
              value={bankAccount}
              onChange={setBankAccount}
            />
            <TextInput
              label="IFSC Code"
              value={ifsc}
              onChange={setIfsc}
            />
          </HStack>
          <Text size="sm" color="secondary">
            Settlement dispatches take place every Monday morning at 06:00 IST. Net liability is automatically credited.
          </Text>
        </VStack>
      </StaticPanel>

      <StaticPanel title="Invoice Statements & Payment History" subtitle="Download tax invoices and monthly receipts.">
        <ResponsiveTable
            columns={columns}
            data={INVOICES}
            primaryKey="id"
          />
      </StaticPanel>
    </VStack>
  );
}
