import { router, usePage } from "@inertiajs/react";
import { useState } from "react";
import Shell from "../components/Shell";
import {
    Badge,
    Button,
    ButtonLink,
    CourseCard,
    Empty,
    Field,
    Heading,
    Panel,
    Stat,
} from "../components/ui";
import {
    money,
    person,
    type Course,
    type Enrollment,
    type Grade,
    type Options,
    type Shared,
} from "../types";

interface Props {
    courses: Course[];
    enrollments: Enrollment[];
    own_grades: Grade[];
    stats: {
        enrolled: number;
        drafts: number;
        classes: number;
        finalized: number;
        balance_accounts: number;
        balance_cents: number;
        arrangements: number;
        awaiting_clearance: number;
    };
    options: Options;
    filters: { branch?: string; period?: string };
    progress: {
        course: Course;
        expected: number;
        completed: number;
        percent: number;
    } | null;
}
export default function Dashboard({
    courses,
    enrollments,
    own_grades,
    stats,
    options,
    filters,
    progress,
}: Props) {
    const { auth, permissions } = usePage<Shared>().props;
    const student = auth?.user_type === "student";
    const has = (permission: string) => permissions.includes(permission);
    const [period, setPeriod] = useState(filters.period ?? "current");
    const [branch, setBranch] = useState(filters.branch ?? "");
    const enrollmentRole = has("report.enrollment");
    const finance = has("finance.record");
    const title = student
        ? "My school records"
        : has("setup.manage")
          ? "School overview"
          : has("enrollment.manage")
            ? "Enrollment overview"
            : finance
              ? "Financial clearance overview"
              : has("class.teach")
                ? "My teaching overview"
                : "Academic overview";
    return (
        <Shell title="Overview">
            <Heading
                title={title}
                description="Enrollment, schedules and official final results for the selected records."
                action={
                    has("enrollment.manage") ? (
                        <ButtonLink href="/enrollments" icon="clipboard">
                            Open enrollments
                        </ButtonLink>
                    ) : undefined
                }
            />
            <Panel>
                <form
                    className="form-grid"
                    onSubmit={(event) => {
                        event.preventDefault();
                        router.get("/", {
                            ...(period === "current" ? {} : { period }),
                            ...(branch ? { branch } : {}),
                        });
                    }}
                >
                    <Field label="Enrollment period">
                        <select
                            value={period}
                            onChange={(event) => setPeriod(event.target.value)}
                        >
                            <option value="current">Current periods</option>
                            <option value="all">All periods</option>
                            {options.periods?.map((p) => (
                                <option key={p.id} value={p.id}>
                                    {p.name}
                                </option>
                            ))}
                        </select>
                    </Field>
                    {!student && (
                        <Field label="Branch">
                            <select
                                value={branch}
                                onChange={(event) =>
                                    setBranch(event.target.value)
                                }
                            >
                                <option value="">All permitted Branches</option>
                                {options.branches?.map((b) => (
                                    <option key={b.id} value={b.id}>
                                        {b.name}
                                    </option>
                                ))}
                            </select>
                        </Field>
                    )}
                    <div className="actions">
                        <Button type="submit">Apply filters</Button>
                    </div>
                </form>
            </Panel>
            <div className="stats-grid">
                {enrollmentRole && (
                    <>
                        <Stat
                            label="Enrolled Students"
                            value={stats.enrolled}
                        />
                        <Stat label="Enrollment drafts" value={stats.drafts} />
                    </>
                )}
                {(student || has("class.read") || has("class.teach")) && (
                    <>
                        <Stat
                            label={
                                student
                                    ? "Enrolled subjects"
                                    : "Subject Classes"
                            }
                            value={stats.classes}
                        />
                        <Stat
                            label={
                                student
                                    ? "Official final results"
                                    : "Classes with finalized grades"
                            }
                            value={
                                student ? own_grades.length : stats.finalized
                            }
                        />
                    </>
                )}
                {finance && (
                    <>
                        <Stat
                            label="Awaiting valid clearance"
                            value={stats.awaiting_clearance}
                        />
                        <Stat
                            label="Recorded outstanding balance"
                            value={money(stats.balance_cents)}
                        />
                    </>
                )}
            </div>
            <Panel title="Quick access">
                <div className="actions">
                    {has("setup.manage") && (
                        <ButtonLink href="/setup" secondary>
                            Courses, Sections and class setup
                        </ButtonLink>
                    )}
                    {(student || has("class.teach") || has("class.read")) && (
                        <ButtonLink href="/schedule" secondary>
                            {student ? "My schedule" : "Class schedules"}
                        </ButtonLink>
                    )}
                    {has("capacity.approve") && (
                        <ButtonLink href="/capacity" secondary>
                            Review capacity exceptions
                        </ButtonLink>
                    )}
                    {has("finance.record") && (
                        <ButtonLink href="/finance" secondary>
                            Record clearance
                        </ButtonLink>
                    )}
                    {has("student.view") && (
                        <ButtonLink href="/students" secondary>
                            Find Student records
                        </ButtonLink>
                    )}
                    {has("users.manage") && (
                        <ButtonLink href="/users" secondary>
                            Accounts and access
                        </ButtonLink>
                    )}
                </div>
            </Panel>
            {progress && (
                <Panel title="Final-grade entry">
                    <p>
                        {progress.course.subject.code} ·{" "}
                        {progress.course.subject.name}
                    </p>
                    <p>
                        {progress.completed} of {progress.expected} enrolled
                        Students have an entered final grade.
                    </p>
                    <ButtonLink href={"/classes/" + progress.course.id}>
                        Open final-grade entries
                    </ButtonLink>
                </Panel>
            )}
            {(student || has("class.teach") || has("class.read")) && (
                <Panel title={student ? "My subjects" : "Subject Classes"}>
                    {courses.length ? (
                        <div className="card-grid">
                            {courses.map((c) => (
                                <CourseCard
                                    key={c.id}
                                    course={c}
                                    student={student}
                                />
                            ))}
                        </div>
                    ) : (
                        <Empty title="No classes in this selection">
                            Choose another period or ask the School
                            Administrator to review assignments.
                        </Empty>
                    )}
                </Panel>
            )}
            {(student || enrollmentRole || finance) && (
                <Panel title="Recent enrollment records">
                    {enrollments.length ? (
                        enrollments.map((e) => (
                            <div className="record-item" key={e.id}>
                                <div>
                                    <strong>
                                        {person(e.student)} ·{" "}
                                        {e.student.student_number}
                                    </strong>
                                    <p>
                                        {e.curriculum.program.name} ·{" "}
                                        {e.period.name}
                                    </p>
                                    <small>{e.branch.name}</small>
                                </div>
                                <Badge
                                    tone={
                                        e.status === "enrolled"
                                            ? "success"
                                            : "warning"
                                    }
                                >
                                    {e.status === "enrolled"
                                        ? "Enrolled"
                                        : "Draft"}
                                </Badge>
                                <a
                                    href={
                                        finance && !has("enrollment.manage")
                                            ? "/finance?student=" + e.student_id
                                            : "/enrollments/" + e.id
                                    }
                                >
                                    View record
                                </a>
                            </div>
                        ))
                    ) : (
                        <p>No enrollment records in this selection.</p>
                    )}
                </Panel>
            )}
            {student && own_grades.length > 0 && (
                <Panel title="Official final subject grades">
                    {own_grades.map((g) => (
                        <div className="record-item" key={g.id}>
                            <div>
                                <strong>
                                    {g.course?.subject.code} ·{" "}
                                    {g.course?.subject.name}
                                </strong>
                                <small>{g.course?.period?.name}</small>
                            </div>
                            <strong>{g.official_grade}</strong>
                            <Badge tone={g.passed ? "success" : "danger"}>
                                {g.passed ? "Passed" : "Failed"}
                            </Badge>
                        </div>
                    ))}
                </Panel>
            )}
        </Shell>
    );
}