import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
    ArrowRight,
    CalendarClock,
    CheckCircle2,
    ClipboardList,
    Mail,
    Phone,
    ShieldCheck,
    Wrench,
} from 'lucide-react';
import InputError from '@/components/input-error';
import { TicketCard } from '@/components/ticket/ticket-ui';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import type { Branding } from '@/types';

type Props = {
    support: {
        email: string | null;
        phone: string | null;
    };
};

/**
 * What a customer sees before they sign in.
 *
 * The job of this page is to get somebody with a fault to the right place in
 * one step, and to tell them plainly, before anything else, what to do if the
 * fault is dangerous.
 */
export default function TicketLanding({ support }: Props) {
    const { branding } = usePage<{ branding: Branding }>().props;

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

            <div className="grid items-start gap-10 lg:grid-cols-[1.15fr_minmax(0,22rem)] lg:gap-14">
                <section>
                    <p className="inline-flex items-center gap-2 rounded-full bg-solar-soft px-3 py-1 text-xs font-medium text-solar-ink ring-1 ring-solar/25">
                        <ShieldCheck className="size-3.5" />
                        {branding.name} · Tickets
                    </p>

                    <h1 className="mt-5 max-w-xl text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
                        Something not right with your solar?
                    </h1>

                    <p className="mt-4 max-w-xl text-base leading-relaxed text-muted-foreground">
                        Tell us what is happening and we will take it from
                        there. If we installed your system, everything about it
                        is already on your account — you only fill in what is
                        wrong.
                    </p>

                    <div className="mt-7 flex flex-wrap items-center gap-3">
                        <Link
                            href="/ticket/tickets/new"
                            className="inline-flex h-10 items-center gap-2 rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow-xs transition-colors hover:bg-primary/90"
                        >
                            Report an issue
                            <ArrowRight className="size-4" />
                        </Link>
                        <Button asChild variant="outline" size="lg">
                            <Link href="/ticket/register">
                                Create a ticket account
                            </Link>
                        </Button>
                    </div>

                    <div className="mt-10 grid gap-4 sm:grid-cols-3">
                        {steps.map((step) => (
                            <div
                                key={step.title}
                                className="rounded-xl bg-card p-4 ring-1 ring-hairline"
                            >
                                <step.icon className="size-5 text-solar-ink" />
                                <h2 className="mt-3 text-sm font-semibold">
                                    {step.title}
                                </h2>
                                <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                                    {step.body}
                                </p>
                            </div>
                        ))}
                    </div>

                    <div className="mt-8 rounded-2xl border border-amber-500/25 bg-amber-500/[0.06] p-5">
                        <h2 className="text-sm font-semibold">
                            What happens after you report it?
                        </h2>
                        <ul className="mt-2 space-y-1.5 text-xs leading-relaxed text-muted-foreground">
                            {expectations.map((line) => (
                                <li key={line} className="flex gap-2">
                                    <CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
                                    <span>{line}</span>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {support.email || support.phone ? (
                        <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
                            <span className="font-medium text-foreground">
                                Prefer to talk to somebody?
                            </span>
                            {support.phone ? (
                                <a
                                    href={`tel:${support.phone.replace(/\s+/g, '')}`}
                                    className="inline-flex items-center gap-1.5 hover:text-foreground"
                                >
                                    <Phone className="size-4" />
                                    {support.phone}
                                </a>
                            ) : null}
                            {support.email ? (
                                <a
                                    href={`mailto:${support.email}`}
                                    className="inline-flex items-center gap-1.5 hover:text-foreground"
                                >
                                    <Mail className="size-4" />
                                    {support.email}
                                </a>
                            ) : null}
                        </div>
                    ) : null}
                </section>

                <section className="lg:sticky lg:top-6">
                    <TicketCard
                        title="Sign in"
                        description="Already have an account? Your reports and systems are waiting."
                    >
                        <Form
                            action="/ticket/login"
                            method="post"
                            resetOnSuccess={['password']}
                            className="flex flex-col gap-4"
                        >
                            {({ processing, errors }) => (
                                <>
                                    <div className="grid gap-2">
                                        <Label htmlFor="email">
                                            Email address
                                        </Label>
                                        <Input
                                            id="email"
                                            name="email"
                                            type="email"
                                            required
                                            autoComplete="email"
                                            placeholder="you@example.com"
                                        />
                                        <InputError message={errors.email} />
                                    </div>

                                    <div className="grid gap-2">
                                        <div className="flex items-center justify-between">
                                            <Label htmlFor="password">
                                                Password
                                            </Label>
                                            <Link
                                                href="/ticket/forgot-password"
                                                className="text-xs text-muted-foreground underline-offset-4 hover:underline"
                                            >
                                                Forgot password?
                                            </Link>
                                        </div>
                                        <Input
                                            id="password"
                                            name="password"
                                            type="password"
                                            required
                                            autoComplete="current-password"
                                        />
                                        <InputError message={errors.password} />
                                    </div>

                                    <Button
                                        type="submit"
                                        className="mt-1 w-full"
                                        disabled={processing}
                                    >
                                        {processing && <Spinner />}
                                        Sign in
                                    </Button>

                                    <p className="text-center text-xs text-muted-foreground">
                                        New here?{' '}
                                        <Link
                                            href="/ticket/register"
                                            className="font-medium text-foreground underline underline-offset-4"
                                        >
                                            Create an account
                                        </Link>
                                    </p>
                                </>
                            )}
                        </Form>
                    </TicketCard>

                    <p className="mt-4 px-1 text-[11px] leading-relaxed text-muted-foreground">
                        Accounts are for the person named on the system. If you
                        are a tenant or managing a property for somebody else,
                        contact us before registering.
                    </p>
                </section>
            </div>
        </>
    );
}

const steps = [
    {
        title: 'Tell us what is wrong',
        body: 'Pick the closest issue, add a description and photos of the display or the panels.',
        icon: ClipboardList,
    },
    {
        title: 'We triage it',
        body: 'A safety concern goes to the front of the queue. Otherwise the right crew is booked.',
        icon: Wrench,
    },
    {
        title: 'Follow it here',
        body: 'See the status, reply to the support team and keep every photo in one place.',
        icon: CalendarClock,
    },
];
const expectations = [
    'A safety concern is triaged the same business day, and we ask you to isolate the system while we attend.',
    'Everything else is answered within one business day and booked in with the crew who did the install.',
    'Warranty faults are lodged with the manufacturer, and you can watch the claim from your report.',
    'Under the Australian Consumer Law, the consumer guarantees apply regardless of any manufacturer warranty period.',
];
