/* How owners pay the platform: the instructions they see on their Billing and SMS pages, and the WhatsApp number
   their "send confirmation" button opens. */
import { useForm } from '@inertiajs/react';
import type { FormEvent } from 'react';
import { CreditCard, Eye, Save } from 'lucide-react';
import PlatformLayout from '../../layouts/PlatformLayout';
import { Button, Card, CardHeader, Field, Input, PageHeader, Textarea } from '../../components/ui';
import PaymentInstructions from '../../components/PaymentInstructions';

type Props = { settings: { payment_instructions: string; support_phone: string } };

export default function Settings({ settings }: Props) {
    const form = useForm(settings);
    const submit = (e: FormEvent) => { e.preventDefault(); form.put(route('platform.settings.update'), { preserveScroll: true }); };

    return (
        <PlatformLayout title="Payment details">
            <PageHeader title="Payment details" subtitle="How businesses pay you. Shown to owners on their Billing and SMS pages." />
            <div className="grid gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader icon={CreditCard} title="Where to pay" />
                    <form onSubmit={submit} className="mt-4 space-y-4" noValidate>
                        <Field label="Payment instructions" htmlFor="pay-text" error={form.errors.payment_instructions}
                            hint="One per line, e.g. Airtel Money: 099 123 4567 (Your Name). Lines naming Airtel or Mpamba/TNM show that logo.">
                            <Textarea id="pay-text" rows={7} value={form.data.payment_instructions} onChange={(e) => form.setData('payment_instructions', e.target.value)} />
                        </Field>
                        <Field label="WhatsApp number for confirmations" htmlFor="pay-phone" error={form.errors.support_phone}
                            hint="Owners tap a button to send you their payment confirmation here.">
                            <Input id="pay-phone" inputMode="tel" value={form.data.support_phone} onChange={(e) => form.setData('support_phone', e.target.value)} />
                        </Field>
                        <Button type="submit" icon={Save} disabled={form.processing || !form.isDirty}>{form.isDirty ? 'Save' : 'Saved'}</Button>
                    </form>
                </Card>
                <Card>
                    <CardHeader icon={Eye} title="What owners see" />
                    <PaymentInstructions text={form.data.payment_instructions || '…'} className="mt-4" />
                    <p className="mt-4 text-sm text-muted">WhatsApp: {form.data.support_phone || '…'}</p>
                </Card>
            </div>
        </PlatformLayout>
    );
}