import { Head, useForm } from "@inertiajs/react";
import {
    Info,
    Lock,
    Mail,
    MessageSquare,
    Save,
    ShieldCheck,
} from "lucide-react";
import { Callout, SectionCard } from "@/components/crm/page-header";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { update as updateMessaging } from "@/routes/messaging";

/**
 * Settings -> Messaging.
 *
 * One switch, and it belongs to the owner of the system: whether the staff
 * inbox may email somebody outside the company at all. It is deliberately
 * separate from the permission that says which staff may use it — the
 * permission answers "who", this answers "whether, today".
 */
export default function MessagingSettings({
    external_enabled,
}: {
    external_enabled: boolean;
}) {
    const form = useForm({
        external_enabled,
    });

    const submit = () => {
        form.put(updateMessaging().url, {
            preserveScroll: true,
        });
    };

    return (
        <>
            <Head title="Messaging" />

            <div className="flex flex-col gap-5">
                <div>
                    <h2 className="text-lg font-semibold tracking-tight">
                        Messaging
                    </h2>
                    <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
                        The staff inbox is internal by default. This is the one
                        company-wide decision about letting it reach beyond the
                        business — and only a Super Admin can change it.
                    </p>
                </div>

                <SectionCard
                    title="Sending outside the company"
                    description="When this is off, every reply stays inside the app, even for staff who hold the permission."
                    icon={Mail}
                    tone={external_enabled ? "success" : "slate"}
                >
                    <form
                        onSubmit={(event) => {
                            event.preventDefault();
                            submit();
                        }}
                        className="flex flex-col gap-4"
                    >
                        <label className="flex cursor-pointer items-start gap-3 rounded-lg px-3 py-3 ring-1 ring-hairline transition-colors hover:bg-accent/30">
                            <Checkbox
                                checked={form.data.external_enabled}
                                onCheckedChange={(checked) =>
                                    form.setData(
                                        "external_enabled",
                                        checked === true,
                                    )
                                }
                                className="mt-0.5"
                            />
                            <span className="min-w-0">
                                <span className="flex items-center gap-1.5 text-sm font-medium">
                                    Allow staff to email an outside contact from
                                    the inbox
                                </span>
                                <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
                                    A conversation can then name one outside
                                    contact, such as a customer or a network
                                    inspector. Replies are only emailed when the
                                    sender ticks the box, so the internal
                                    discussion around a reply never leaves the
                                    building.
                                </span>
                            </span>
                        </label>

                        <div className="flex items-center justify-between gap-3">
                            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
                                {external_enabled ? (
                                    <>
                                        <ShieldCheck className="size-3.5 text-emerald-600" />
                                        Currently on
                                    </>
                                ) : (
                                    <>
                                        <Lock className="size-3.5" />
                                        Currently off — internal only
                                    </>
                                )}
                            </span>

                            <Button
                                type="submit"
                                size="sm"
                                disabled={form.processing}
                            >
                                <Save className="size-4" />
                                Save
                            </Button>
                        </div>

                        {form.errors.external_enabled ? (
                            <p className="text-xs font-medium text-destructive">
                                {form.errors.external_enabled}
                            </p>
                        ) : null}
                    </form>
                </SectionCard>

                <Callout
                    tone={external_enabled ? "warning" : "info"}
                    icon={external_enabled ? Info : MessageSquare}
                    title="Two keys, not one"
                >
                    <p>
                        Turning this on does not give everybody the ability to
                        use it. Staff also need the{" "}
                        <span className="font-medium">
                            “Email people outside the company from the inbox”
                        </span>{" "}
                        permission, which is granted per role in{" "}
                        <span className="font-medium">
                            Roles &amp; permissions
                        </span>
                        . Turning this off overrides that permission for
                        everyone at once.
                    </p>
                    <p className="mt-2">
                        Email sent from here uses the SMTP server set up under{" "}
                        <span className="font-medium">Email delivery</span>. If
                        that is not configured, an emailed reply will fail and
                        the failure is shown to the sender rather than quietly
                        dropped.
                    </p>
                </Callout>
            </div>
        </>
    );
}
