import type { ReactNode } from "react";

import {
    COURSES,
    type StudentField,
    type StudentFormErrors,
    type StudentFormValues,
} from "../lib/students";

type Props = {
    values: StudentFormValues;
    errors: StudentFormErrors;
    onChange: (field: StudentField, value: string) => void;
    disabled?: boolean;
};

const inputClass =
    "w-full rounded-lg border border-white/10 bg-neutral-900/60 px-3 py-2 text-sm text-white placeholder:text-white/30 outline-none transition-colors focus:border-white/40 disabled:opacity-50";

export const buttonPrimaryClass =
    "inline-flex items-center justify-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-semibold text-neutral-900 transition-colors hover:bg-white/90 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer";

export const buttonGhostClass =
    "inline-flex items-center justify-center gap-2 rounded-lg border border-white/15 px-4 py-2 text-sm font-medium text-white/70 transition-colors hover:border-white/30 hover:text-white cursor-pointer";

export function Field({
    label,
    error,
    hint,
    children,
}: {
    label: string;
    error?: string;
    hint?: string;
    children: ReactNode;
}) {
    return (
        <label className="flex flex-col gap-1.5">
            <span className="text-xs font-medium uppercase tracking-wide text-white/50">{label}</span>
            {children}
            {error ? (
                <span className="text-xs text-red-400">{error}</span>
            ) : hint ? (
                <span className="text-xs text-white/30">{hint}</span>
            ) : null}
        </label>
    );
}

/** The four student inputs, shared by the create form and the edit panel. */
export default function StudentFields({ values, errors, onChange, disabled }: Props) {
    return (
        <div className="grid gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
                <Field label="Full name" error={errors.name}>
                    <input
                        className={inputClass}
                        type="text"
                        name="name"
                        value={values.name}
                        placeholder="Juan Dela Cruz"
                        autoComplete="name"
                        disabled={disabled}
                        onChange={(event) => onChange("name", event.target.value)}
                    />
                </Field>
            </div>

            <div className="sm:col-span-2">
                <Field label="Email" error={errors.email}>
                    <input
                        className={inputClass}
                        type="email"
                        name="email"
                        value={values.email}
                        placeholder="juan@example.com"
                        autoComplete="email"
                        disabled={disabled}
                        onChange={(event) => onChange("email", event.target.value)}
                    />
                </Field>
            </div>

            <Field label="Course" error={errors.course}>
                <select
                    className={inputClass}
                    name="course"
                    value={values.course}
                    disabled={disabled}
                    onChange={(event) => onChange("course", event.target.value)}
                >
                    <option value="">Select a course</option>
                    {COURSES.map((course) => (
                        <option key={course} value={course}>
                            {course}
                        </option>
                    ))}
                </select>
            </Field>

            <Field label="Year level" error={errors.yearLevel}>
                <input
                    className={inputClass}
                    type="number"
                    name="yearLevel"
                    min={1}
                    max={5}
                    value={values.yearLevel}
                    disabled={disabled}
                    onChange={(event) => onChange("yearLevel", event.target.value)}
                />
            </Field>
        </div>
    );
}