'use client';

import {useState} from 'react';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {FormLayout} from '@astryxdesign/core/FormLayout';
import {TextInput} from '@astryxdesign/core/TextInput';
import {Selector} from '@astryxdesign/core/Selector';
import {NumberInput} from '@astryxdesign/core/NumberInput';
import {Button} from '@astryxdesign/core/Button';
import {Text} from '@astryxdesign/core/Text';
import {Divider} from '@astryxdesign/core/Divider';
import {useToast} from '@astryxdesign/core/Toast';
import {StaticPanel} from '@/shared/components/patterns/PanelCard';

export interface BusinessData {
  businessName: string;
  legalEntity: string;
  category: string;
  gstin: string;
  pan: string;
  phone: string;
  email: string;
  address: string;
  city: string;
  pincode: string;
  lytsPerHundred: number;
}

const DEFAULT_BUSINESS: BusinessData = {
  businessName: 'Loyaly Retail Pvt Ltd',
  legalEntity: 'Private Limited Company',
  category: 'Retail & Quick Service Restaurant',
  gstin: '29AABCL1234M1Z7',
  pan: 'AABCL1234M',
  phone: '+91 98450 12345',
  email: 'aravind@nearle.in',
  address: '100 Feet Road, Indiranagar',
  city: 'Bengaluru, Karnataka',
  pincode: '560038',
  lytsPerHundred: 5,
};

export function BusinessForm() {
  const toast = useToast();
  const [form, setForm] = useState<BusinessData>(DEFAULT_BUSINESS);
  const [isSaving, setIsSaving] = useState(false);
  const [savedData, setSavedData] = useState<BusinessData>(DEFAULT_BUSINESS);

  const set = <K extends keyof BusinessData>(key: K, val: BusinessData[K]) =>
    setForm((f) => ({...f, [key]: val}));

  const isDirty = JSON.stringify(form) !== JSON.stringify(savedData);

  const handleSave = () => {
    setIsSaving(true);
    setTimeout(() => {
      setSavedData(form);
      setIsSaving(false);
      toast({body: 'Business details updated successfully'});
    }, 400);
  };

  return (
    <StaticPanel
      title="Business Information"
      subtitle="Official company details, tax registration and operating address."
      actions={
        <HStack gap={2} vAlign="center">
          {isDirty ? (
            <Text size="sm" color="secondary">
              Unsaved changes
            </Text>
          ) : null}
          <Button
            variant="secondary"
            size="sm"
            label="Reset"
            isDisabled={!isDirty || isSaving}
            onClick={() => setForm(savedData)}
          />
          <Button
            variant="primary"
            size="sm"
            label="Save changes"
            isDisabled={!isDirty}
            isLoading={isSaving}
            onClick={handleSave}
          />
        </HStack>
      }
    >
      <VStack gap={5}>
        <FormLayout direction="horizontal">
          <TextInput
            label="Business name"
            value={form.businessName}
            onChange={(v) => set('businessName', v)}
            isRequired
          />
          <Selector
            label="Legal entity structure"
            value={form.legalEntity}
            onChange={(v) => set('legalEntity', v)}
            options={[
              'Private Limited Company',
              'Sole Proprietorship',
              'Partnership Firm',
              'Limited Liability Partnership (LLP)',
            ]}
          />
        </FormLayout>

        <FormLayout direction="horizontal">
          <TextInput
            label="GSTIN"
            value={form.gstin}
            onChange={(v) => set('gstin', v.toUpperCase())}
            description="15-digit Tax Registration Number"
          />
          <TextInput
            label="PAN"
            value={form.pan}
            onChange={(v) => set('pan', v.toUpperCase())}
            description="10-digit Permanent Account Number"
          />
        </FormLayout>

        <FormLayout direction="horizontal">
          <TextInput
            label="Support email"
            value={form.email}
            onChange={(v) => set('email', v)}
            isRequired
          />
          <TextInput
            label="Support phone"
            value={form.phone}
            onChange={(v) => set('phone', v)}
          />
        </FormLayout>

        <Divider />

        <FormLayout direction="horizontal">
          <TextInput
            label="Registered address"
            value={form.address}
            onChange={(v) => set('address', v)}
          />
          <TextInput
            label="City & State"
            value={form.city}
            onChange={(v) => set('city', v)}
          />
        </FormLayout>

        <FormLayout direction="horizontal">
          <TextInput
            label="Pincode"
            value={form.pincode}
            onChange={(v) => set('pincode', v)}
          />
          <NumberInput
            label="Default LYTs per ₹100 spent"
            value={form.lytsPerHundred}
            onChange={(v) => set('lytsPerHundred', v ?? 0)}
            min={0}
            max={100}
            description="1 LYT = ₹1. Basket ₹1,000 earns 50 LYTs (5%)."
          />
        </FormLayout>
      </VStack>
    </StaticPanel>
  );
}
