import type { VpAccountDetails } from "@/lib/features/members/types";
import { Card, Grid, Group, Text, TextInput } from "@mantine/core";
import { IconClipboardText } from "@tabler/icons-react";
import styles from "@/routes/promo-code-campaigns/_components/promo.module.css";

const AccountDetails: React.FC<{
  account: VpAccountDetails;
  pointsAllocated?: number | null;
}> = ({ account, pointsAllocated }) => {
  return (
    // Promo `sectionCard` frame with the accent icon chip, so this panel reads
    // like the campaign cards instead of carrying its own colour band.
    <Card className={styles.sectionCard} p="md" mx={28} mb="md">
      <Group gap={8} align="center" mb="sm">
        <span className={styles.sectionIcon}>
          <IconClipboardText size={15} />
        </span>
        <Text fz={14} fw={600}>
          Details
        </Text>
      </Group>
      <hr className={styles.gradientRule} />
      <form>
        <Grid pt={14} gutter={"lg"}>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Membership Number"
              radius={4}
              disabled
              value={account.AccountID}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Account Type"
              radius={4}
              disabled
              value={account.AccountType}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Account Name"
              radius={4}
              disabled
              value={account.AccountName}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Service Center"
              radius={4}
              disabled
              value={account.ServiceCenter}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Service Center ID"
              radius={4}
              disabled
              value={account.ServiceCenterID}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Joined Date"
              radius={4}
              disabled
              value={account.JoinedDate}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Billing Address"
              radius={4}
              disabled
              value={account?.BillingAddressLine1}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Billing Address"
              radius={4}
              disabled
              value={account?.BillingAddressLine2}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Town"
              radius={4}
              disabled
              value={account?.BillingAddressCity}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="State"
              radius={4}
              disabled
              value={account?.BillingAddressState}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Country"
              radius={4}
              disabled
              value={account?.BillingAddrCountry}
            />
          </Grid.Col>
          <Grid.Col span={4}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="PostCode"
              radius={4}
              disabled
              value={account?.BillingPostcode?.toString()}
            />
          </Grid.Col>
          {/* Only when the host route supplies it — the promo drilldowns pass
              the reward points the code allocated to this member. The prop has
              always been accepted here but was never rendered. */}
          {pointsAllocated !== null && pointsAllocated !== undefined ? (
            <Grid.Col span={4}>
              <TextInput
                fz={14}
                labelProps={{ fz: 13, mb: 5 }}
                label="Points Allocated"
                radius={4}
                disabled
                value={pointsAllocated.toLocaleString()}
              />
            </Grid.Col>
          ) : null}
          <Grid.Col span={12}>
            <TextInput
              fz={14}
              labelProps={{ fz: 13, mb: 5 }}
              label="Notes"
              radius={4}
              disabled
              value={account?.Notes}
            />
          </Grid.Col>
        </Grid>
      </form>
    </Card>
  );
};

export default AccountDetails;