import { router, usePage } from "@inertiajs/react";
import { useState } from "react";
import Shell from "../components/Shell";
import {
    Badge,
    Button,
    Dialog,
    Empty,
    Errors,
    Field,
    Heading,
    Panel,
    SaveForm,
    Table,
} from "../components/ui";
import type { Category, Conversion, Course, Options, Shared } from "../types";
const Blank = () => <option value="">Choose an option</option>;
function PolicyEditor() {
    const { levels } = usePage<Shared>().props;
    const [scale, setScale] = useState("percentage");
    const [categories, setCategories] = useState<Category[]>([
        { name: "Written work", weight: 30 },
        { name: "Performance tasks", weight: 50 },
        { name: "Exams", weight: 20 },
    ]);
    const [conversions, setConversions] = useState<Conversion[]>([]);
    return (
        <SaveForm
            url="/setup/policies"
            label="Save grading policy"
            reset={false}
        >
            <div className="form-grid">
                <Field label="Policy name">
                    <input
                        name="name"
                        required
                        placeholder="e.g. Grade 7 · 2026 policy"
                    />
                </Field>
                <Field label="School level">
                    <select name="level" required>
                        <Blank />
                        {Object.entries(levels).map(([k, v]) => (
                            <option key={k} value={k}>
                                {v}
                            </option>
                        ))}
                    </select>
                </Field>
                <Field label="Official grade scale">
                    <select
                        name="scale"
                        value={scale}
                        onChange={(e) => setScale(e.target.value)}
                    >
                        <option value="percentage">
                            Percentage (75, 80, 85)
                        </option>
                        <option value="numeric">
                            Numeric rating (1.0, 2.0)
                        </option>
                    </select>
                </Field>
                {scale === "percentage" && (
                    <Field label="Passing mark">
                        <input
                            name="passing_mark"
                            required
                            type="number"
                            min={0}
                            max={100}
                            step="0.01"
                            placeholder="e.g. 75"
                        />
                    </Field>
                )}
            </div>
            <h3>Assessment categories</h3>
            <p className="small">
                Scores are totaled within each category, divided by its maximum
                points, then weighted. Weights must total 100%.
            </p>
            <input
                type="hidden"
                name="categories"
                value={JSON.stringify(categories)}
            />
            {categories.map((c, i) => (
                <div className="repeat-row" key={i}>
                    <Field label="Category">
                        <input
                            required
                            value={c.name}
                            onChange={(e) =>
                                setCategories(
                                    categories.map((v, n) =>
                                        n === i
                                            ? { ...v, name: e.target.value }
                                            : v,
                                    ),
                                )
                            }
                        />
                    </Field>
                    <Field label="Weight (%)">
                        <input
                            required
                            type="number"
                            min={0.01}
                            max={100}
                            step="0.01"
                            value={c.weight}
                            onChange={(e) =>
                                setCategories(
                                    categories.map((v, n) =>
                                        n === i
                                            ? {
                                                  ...v,
                                                  weight: Number(
                                                      e.target.value,
                                                  ),
                                              }
                                            : v,
                                    ),
                                )
                            }
                        />
                    </Field>
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={() =>
                            setCategories(categories.filter((_, n) => n !== i))
                        }
                    >
                        Remove
                    </Button>
                </div>
            ))}
            <Button
                type="button"
                variant="secondary"
                onClick={() =>
                    setCategories([...categories, { name: "", weight: 0 }])
                }
            >
                Add category
            </Button>
            <p>
                Total weight:{" "}
                <strong>{categories.reduce((s, c) => s + c.weight, 0)}%</strong>
            </p>
            <input
                type="hidden"
                name="conversions"
                value={JSON.stringify(scale === "numeric" ? conversions : [])}
            />
            {scale === "numeric" && (
                <>
                    <h3>Official grade conversions</h3>
                    <p>
                        Enter your school’s conversion table. Cover every
                        calculated result from 0.00 to 100.00, without gaps or
                        overlaps.
                    </p>
                    {conversions.map((r, i) => (
                        <div className="panel" key={i}>
                            <div className="form-grid">
                                {(["min", "max", "grade"] as const).map(
                                    (key) => (
                                        <Field
                                            key={key}
                                            label={
                                                key === "min"
                                                    ? "Minimum result"
                                                    : key === "max"
                                                      ? "Maximum result"
                                                      : "Official grade"
                                            }
                                        >
                                            <input
                                                required
                                                type="number"
                                                min={0}
                                                max={100}
                                                step="0.01"
                                                value={r[key]}
                                                onChange={(e) =>
                                                    setConversions(
                                                        conversions.map(
                                                            (v, n) =>
                                                                n === i
                                                                    ? {
                                                                          ...v,
                                                                          [key]: Number(
                                                                              e
                                                                                  .target
                                                                                  .value,
                                                                          ),
                                                                      }
                                                                    : v,
                                                        ),
                                                    )
                                                }
                                            />
                                        </Field>
                                    ),
                                )}
                                <label className="checkbox">
                                    <input
                                        type="checkbox"
                                        checked={r.passed}
                                        onChange={(e) =>
                                            setConversions(
                                                conversions.map((v, n) =>
                                                    n === i
                                                        ? {
                                                              ...v,
                                                              passed: e.target
                                                                  .checked,
                                                          }
                                                        : v,
                                                ),
                                            )
                                        }
                                    />
                                    Passing grade
                                </label>
                            </div>
                            <Button
                                variant="ghost"
                                type="button"
                                onClick={() =>
                                    setConversions(
                                        conversions.filter((_, n) => n !== i),
                                    )
                                }
                            >
                                Remove range
                            </Button>
                        </div>
                    ))}
                    <Button
                        variant="secondary"
                        type="button"
                        onClick={() =>
                            setConversions([
                                ...conversions,
                                { min: 0, max: 100, grade: 1, passed: true },
                            ])
                        }
                    >
                        Add conversion range
                    </Button>
                </>
            )}
        </SaveForm>
    );
}
export default function Setup(options: Options) {
    const { levels } = usePage<Shared>().props;
    const [tab, setTab] = useState("School structure");
    const [assignment, setAssignment] = useState<Course | null>(null);
    const [curriculum, setCurriculum] = useState("");
    const [prerequisites, setPrerequisites] = useState<number[]>([]);
    return (
        <Shell title="School setup">
            <Heading
                title="School setup"
                description="Prepare branches, academic periods, curricula, classes and grading rules."
            />
            <div
                role="tablist"
                aria-label="School setup sections"
                className="tabs setup-tabs"
            >
                {[
                    "School structure",
                    "Academic periods",
                    "Subjects",
                    "Curricula",
                    "Grading policies",
                    "Class offerings",
                ].map((t) => (
                    <button
                        key={t}
                        role="tab"
                        aria-selected={tab === t}
                        onClick={() => setTab(t)}
                    >
                        {t}
                    </button>
                ))}
            </div>
            {tab === "School structure" && (
                <div className="two-columns">
                    <div className="form-stack">
                        <Panel title="Add branch">
                            <SaveForm url="/setup/branches" label="Add branch">
                                <Field label="Branch name">
                                    <input name="name" required />
                                </Field>
                                <Field label="Branch code">
                                    <input
                                        name="code"
                                        required
                                        maxLength={20}
                                    />
                                </Field>
                            </SaveForm>
                            <div className="record-list">
                                {options.branches.map((b) => (
                                    <div className="record-item" key={b.id}>
                                        {b.name}
                                        <Badge>{b.code}</Badge>
                                    </div>
                                ))}
                            </div>
                        </Panel>
                        <Panel title="Add department">
                            <SaveForm
                                url="/setup/departments"
                                label="Add department"
                            >
                                <Field label="Department name">
                                    <input name="name" required />
                                </Field>
                                <Field label="Branch">
                                    <select name="branch_id" required>
                                        <Blank />
                                        {options.branches.map((b) => (
                                            <option key={b.id} value={b.id}>
                                                {b.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                            </SaveForm>
                            {options.departments.map((d) => (
                                <p key={d.id}>
                                    {d.name} · {d.branch?.name}
                                </p>
                            ))}
                        </Panel>
                    </div>
                    <Panel title="Add program or school level">
                        <SaveForm url="/setup/programs" label="Add program">
                            <Field label="Program name">
                                <input
                                    name="name"
                                    required
                                    placeholder="e.g. BS Information Technology or Junior High School"
                                />
                            </Field>
                            <Field label="School level">
                                <select name="level" required>
                                    <Blank />
                                    {Object.entries(levels).map(([k, v]) => (
                                        <option key={k} value={k}>
                                            {v}
                                        </option>
                                    ))}
                                </select>
                            </Field>
                        </SaveForm>
                        {options.programs.map((p) => (
                            <div className="record-item" key={p.id}>
                                <span>{p.name}</span>
                                <Badge>{levels[p.level]}</Badge>
                            </div>
                        ))}
                    </Panel>
                </div>
            )}
            {tab === "Academic periods" && (
                <div className="two-columns">
                    <Panel title="Add academic period">
                        <SaveForm url="/setup/periods" label="Create period">
                            <Field label="Period name">
                                <input
                                    name="name"
                                    required
                                    placeholder="e.g. First Semester · 2026–2027"
                                />
                            </Field>
                            <div className="form-grid">
                                <Field label="School year">
                                    <input
                                        name="school_year"
                                        required
                                        placeholder="2026–2027"
                                    />
                                </Field>
                                <Field label="Enrollment period type">
                                    <select name="kind">
                                        <option value="semester">
                                            Semester
                                        </option>
                                        <option value="year">
                                            School year
                                        </option>
                                    </select>
                                </Field>
                                <Field label="Starts on">
                                    <input
                                        name="starts_on"
                                        type="date"
                                        required
                                    />
                                </Field>
                                <Field label="Ends on">
                                    <input
                                        name="ends_on"
                                        type="date"
                                        required
                                    />
                                </Field>
                                <Field label="Enrollment availability">
                                    <select name="enrollment_open">
                                        <option value="0">Closed</option>
                                        <option value="1">Open</option>
                                    </select>
                                </Field>
                            </div>
                        </SaveForm>
                    </Panel>
                    <Panel title="Academic periods">
                        {options.periods.map((p) => (
                            <div className="record-item" key={p.id}>
                                <div>
                                    <strong>{p.name}</strong>
                                    <small>
                                        {p.starts_on.slice(0, 10)} –{" "}
                                        {p.ends_on.slice(0, 10)}
                                    </small>
                                    <Badge
                                        tone={
                                            p.enrollment_open
                                                ? "success"
                                                : "neutral"
                                        }
                                    >
                                        {p.enrollment_open
                                            ? "Enrollment open"
                                            : "Enrollment closed"}
                                    </Badge>
                                </div>
                                <Button
                                    variant="secondary"
                                    onClick={() =>
                                        router.post(
                                            `/periods/${p.id}/toggle`,
                                            {},
                                            { preserveScroll: true },
                                        )
                                    }
                                >
                                    {p.enrollment_open
                                        ? "Close enrollment"
                                        : "Open enrollment"}
                                </Button>
                            </div>
                        ))}
                    </Panel>
                </div>
            )}
            {tab === "Subjects" && (
                <div className="two-columns">
                    <Panel title="Add subject">
                        <SaveForm url="/setup/subjects" label="Add subject">
                            <Field label="Subject code">
                                <input name="code" required />
                            </Field>
                            <Field label="Subject name">
                                <input name="name" required />
                            </Field>
                            <Field label="Units">
                                <input
                                    name="units"
                                    type="number"
                                    min={0.01}
                                    max={30}
                                    step="0.01"
                                    required
                                    defaultValue={3}
                                />
                            </Field>
                        </SaveForm>
                    </Panel>
                    <Panel title="Subject catalog">
                        <Table columns={["Code", "Subject", "Units"]}>
                            {options.subjects.map((s) => (
                                <tr key={s.id}>
                                    <td>{s.code}</td>
                                    <td>{s.name}</td>
                                    <td>{s.units}</td>
                                </tr>
                            ))}
                        </Table>
                    </Panel>
                </div>
            )}
            {tab === "Curricula" && (
                <>
                    <div className="two-columns">
                        <Panel title="Create curriculum version">
                            <SaveForm
                                url="/setup/curricula"
                                label="Create draft curriculum"
                            >
                                <Field label="Program">
                                    <select name="program_id" required>
                                        <Blank />
                                        {options.programs.map((p) => (
                                            <option key={p.id} value={p.id}>
                                                {p.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Version">
                                    <input
                                        name="version"
                                        required
                                        placeholder="e.g. 2026 revision 1"
                                    />
                                </Field>
                            </SaveForm>
                        </Panel>
                        <Panel title="Add curriculum subject">
                            <SaveForm
                                url="/setup/requirements"
                                label="Add subject requirement"
                                reset={false}
                            >
                                <Field label="Draft curriculum">
                                    <select
                                        name="curriculum_id"
                                        required
                                        value={curriculum}
                                        onChange={(e) =>
                                            setCurriculum(e.target.value)
                                        }
                                    >
                                        <Blank />
                                        {options.curricula
                                            .filter((c) => !c.published)
                                            .map((c) => (
                                                <option key={c.id} value={c.id}>
                                                    {c.program.name} ·{" "}
                                                    {c.version}
                                                </option>
                                            ))}
                                    </select>
                                </Field>
                                <Field label="Subject">
                                    <select name="subject_id" required>
                                        <Blank />
                                        {options.subjects.map((s) => (
                                            <option key={s.id} value={s.id}>
                                                {s.code} · {s.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <div className="form-grid">
                                    <Field label="Year / grade level">
                                        <input
                                            name="year_level"
                                            required
                                            type="number"
                                            min={1}
                                            max={12}
                                        />
                                    </Field>
                                    <Field label="Term / sequence label">
                                        <input
                                            name="term_label"
                                            required
                                            placeholder="e.g. First semester"
                                        />
                                    </Field>
                                </div>
                                <fieldset>
                                    <legend>Prerequisite subjects</legend>
                                    <input
                                        type="hidden"
                                        name="prerequisite_ids"
                                        value={JSON.stringify(prerequisites)}
                                    />
                                    {options.subjects.map((s) => (
                                        <label className="checkbox" key={s.id}>
                                            <input
                                                type="checkbox"
                                                checked={prerequisites.includes(
                                                    s.id,
                                                )}
                                                onChange={(e) =>
                                                    setPrerequisites(
                                                        e.target.checked
                                                            ? [
                                                                  ...prerequisites,
                                                                  s.id,
                                                              ]
                                                            : prerequisites.filter(
                                                                  (id) =>
                                                                      id !==
                                                                      s.id,
                                                              ),
                                                    )
                                                }
                                            />
                                            {s.code} · {s.name}
                                        </label>
                                    ))}
                                </fieldset>
                            </SaveForm>
                        </Panel>
                    </div>
                    <Panel title="Curriculum versions">
                        <p>
                            Published versions are locked. Revisions do not
                            change students’ existing curriculum assignments.
                        </p>
                        {options.curricula.map((c) => (
                            <details className="accordion" key={c.id}>
                                <summary>
                                    {c.program.name} · {c.version} ·{" "}
                                    {c.published ? "Published" : "Draft"}
                                </summary>
                                <div>
                                    <Table
                                        columns={[
                                            "Subject",
                                            "Year / grade",
                                            "Term",
                                            "Prerequisites",
                                            ...(!c.published ? ["Action"] : []),
                                        ]}
                                    >
                                        {c.subjects.map((s) => (
                                            <tr key={s.id}>
                                                <td>
                                                    {s.subject.code} ·{" "}
                                                    {s.subject.name}
                                                </td>
                                                <td>{s.year_level}</td>
                                                <td>{s.term_label}</td>
                                                <td>
                                                    {s.prerequisites
                                                        .map(
                                                            (p) =>
                                                                p
                                                                    .requiredSubject
                                                                    .code,
                                                        )
                                                        .join(", ") || "None"}
                                                </td>
                                                {!c.published && (
                                                    <td>
                                                        <Button
                                                            variant="ghost"
                                                            onClick={() =>
                                                                router.delete(
                                                                    `/requirements/${s.id}`,
                                                                    {
                                                                        preserveScroll: true,
                                                                    },
                                                                )
                                                            }
                                                        >
                                                            Remove from draft
                                                        </Button>
                                                    </td>
                                                )}
                                            </tr>
                                        ))}
                                    </Table>
                                    {!c.published && (
                                        <Button
                                            onClick={() =>
                                                router.post(
                                                    `/curricula/${c.id}/publish`,
                                                    {},
                                                    { preserveScroll: true },
                                                )
                                            }
                                        >
                                            Publish curriculum
                                        </Button>
                                    )}
                                </div>
                            </details>
                        ))}
                    </Panel>
                </>
            )}
            {tab === "Grading policies" && (
                <div className="two-columns">
                    <Panel title="Create grading policy">
                        <PolicyEditor />
                    </Panel>
                    <Panel title="Saved policies">
                        <p>
                            Classes keep a snapshot of their policy. Create a
                            new policy for future classes when the rules change.
                        </p>
                        {options.policies.map((p) => (
                            <details className="accordion" key={p.id}>
                                <summary>
                                    {p.name} · {levels[p.level]}
                                </summary>
                                <div>
                                    <p>
                                        {p.scale === "percentage"
                                            ? `Percentage · Passing mark ${p.passing_mark}`
                                            : "Numeric rating"}
                                    </p>
                                    {p.categories.map((c) => (
                                        <p key={c.name}>
                                            {c.name}: {c.weight}%
                                        </p>
                                    ))}
                                    {p.conversions.map((r, i) => (
                                        <p key={i}>
                                            {r.min}–{r.max} → {r.grade} (
                                            {r.passed ? "Pass" : "Fail"})
                                        </p>
                                    ))}
                                </div>
                            </details>
                        ))}
                    </Panel>
                </div>
            )}
            {tab === "Class offerings" && (
                <>
                    <Panel title="Offer a class">
                        <SaveForm
                            url="/setup/courses"
                            label="Create class offering"
                        >
                            <div className="form-grid">
                                <Field label="Branch">
                                    <select name="branch_id" required>
                                        <Blank />
                                        {options.branches.map((b) => (
                                            <option key={b.id} value={b.id}>
                                                {b.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Department">
                                    <select name="department_id" required>
                                        <Blank />
                                        {options.departments.map((d) => (
                                            <option key={d.id} value={d.id}>
                                                {d.name} · {d.branch?.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Academic period">
                                    <select name="academic_period_id" required>
                                        <Blank />
                                        {options.periods.map((p) => (
                                            <option key={p.id} value={p.id}>
                                                {p.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Program">
                                    <select name="program_id" required>
                                        <Blank />
                                        {options.programs.map((p) => (
                                            <option key={p.id} value={p.id}>
                                                {p.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Subject">
                                    <select name="subject_id" required>
                                        <Blank />
                                        {options.subjects.map((s) => (
                                            <option key={s.id} value={s.id}>
                                                {s.code} · {s.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Subject teacher">
                                    <select name="teacher_id" required>
                                        <Blank />
                                        {options.teachers.map((t) => (
                                            <option key={t.id} value={t.id}>
                                                {t.name}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Grading policy">
                                    <select name="grading_policy_id" required>
                                        <Blank />
                                        {options.policies.map((p) => (
                                            <option key={p.id} value={p.id}>
                                                {p.name} · {levels[p.level]}
                                            </option>
                                        ))}
                                    </select>
                                </Field>
                                <Field label="Section">
                                    <input name="section" required />
                                </Field>
                                <Field label="Class capacity">
                                    <input
                                        name="capacity"
                                        type="number"
                                        required
                                        min={1}
                                        max={500}
                                        defaultValue={40}
                                    />
                                </Field>
                                <Field label="Schedule (optional)">
                                    <input name="schedule" />
                                </Field>
                            </div>
                        </SaveForm>
                    </Panel>
                    <Panel title="Offered classes">
                        <Table
                            columns={[
                                "Subject",
                                "Section",
                                "Branch",
                                "Period",
                                "Teacher",
                                "Action",
                            ]}
                        >
                            {options.courses.map((c) => (
                                <tr key={c.id}>
                                    <td>
                                        {c.subject.code} · {c.subject.name}
                                    </td>
                                    <td>{c.section}</td>
                                    <td>{c.branch.name}</td>
                                    <td>{c.period.name}</td>
                                    <td>{c.teacher.name}</td>
                                    <td>
                                        {!c.finalized_at && (
                                            <Button
                                                variant="secondary"
                                                onClick={() => setAssignment(c)}
                                            >
                                                Assign teacher
                                            </Button>
                                        )}
                                    </td>
                                </tr>
                            ))}
                        </Table>
                        {!options.courses.length && (
                            <Empty title="No class offerings yet" />
                        )}
                    </Panel>
                </>
            )}
            {assignment && (
                <Dialog
                    title="Class teacher assignment"
                    onClose={() => setAssignment(null)}
                >
                    <Errors />
                    <p>
                        {assignment.subject.name} · {assignment.section} ·{" "}
                        {assignment.branch.name}
                    </p>
                    <SaveForm
                        url={`/classes/${assignment.id}/assignment`}
                        method="put"
                        label="Save teacher assignment"
                        onSuccess={() => setAssignment(null)}
                    >
                        <Field label="Subject teacher">
                            <select
                                name="teacher_id"
                                required
                                defaultValue={assignment.teacher_id}
                            >
                                {options.teachers.map((t) => (
                                    <option key={t.id} value={t.id}>
                                        {t.name}
                                    </option>
                                ))}
                            </select>
                        </Field>
                        <Field label="Schedule">
                            <input
                                name="schedule"
                                defaultValue={assignment.schedule ?? ""}
                            />
                        </Field>
                    </SaveForm>
                </Dialog>
            )}
        </Shell>
    );
}