import React from "react";
import AppLayout from "@/layouts/app-layout";
import { useForm, Link } from "@inertiajs/react";
import { Alert, Button, Card, Container, Group, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { IconArrowLeft, IconDeviceFloppy } from "@tabler/icons-react";

type PendingInvoice = {
    id: number;
    invoice_no: string;
    pending_sql_acc_code?: string | null;
    pending_client_name?: string | null;
    client?: {
        name: string;
        customer_id: string;
    } | null;
};

interface Props {
    invoice: PendingInvoice;
    existingClient: PendingInvoice["client"];
    unlinkedClients: { value: string; label: string }[];
}

export default function Page({ invoice, existingClient, unlinkedClients }: Props) {
    const form = useForm({
        client_id: "",
        sql_acc_code: invoice.pending_sql_acc_code ?? "",
    });

    const submit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        form.post(route("client-invoices.client.store", { invoice: invoice.id }));
    };

    return (
        <AppLayout>
            <Container size="lg" px="xs">
                <Group position="apart" mb="md">
                    <Stack spacing={2}>
                        <Title order={2}>Link client</Title>
                        <Text size="sm" color="dimmed">
                            Invoice {invoice.invoice_no}
                        </Text>
                    </Stack>
                    <Button
                        component={Link}
                        href={route("dashboard")}
                        leftIcon={<IconArrowLeft size={16} />}
                        variant="outline"
                    >
                        Back
                    </Button>
                </Group>

                <Card withBorder>
                    <form onSubmit={submit}>
                        <Stack spacing="md">
                            {existingClient ? (
                                <Alert color="blue">
                                    This SQL account code is already linked to {existingClient.name}. You can continue to the invoice.
                                </Alert>
                            ) : null}

                            <Select
                                label="Google client"
                                placeholder="Select a synced Google client without SQL account code"
                                data={unlinkedClients}
                                value={form.data.client_id}
                                onChange={(value) => form.setData("client_id", value ?? "")}
                                error={form.errors.client_id}
                                searchable
                                nothingFound="No unlinked clients found. Sync Google records from the accounts page first."
                                required
                                disabled={!!existingClient}
                            />

                            <TextInput
                                label="SQL account code"
                                value={form.data.sql_acc_code}
                                onChange={(event) => form.setData("sql_acc_code", event.target.value)}
                                error={form.errors.sql_acc_code}
                                required
                            />

                            <Button
                                type="submit"
                                leftIcon={<IconDeviceFloppy size={16} />}
                                loading={form.processing}
                                style={{ width: "max-content" }}
                                disabled={!!existingClient}
                            >
                                Link client and continue
                            </Button>
                        </Stack>
                    </form>
                </Card>
            </Container>
        </AppLayout>
    );
}