import React, { useState } from "react";

const SESSIONS = ["2024-25", "2025-26", "2026-27"];
const CLASSES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
const SECTIONS = ["A", "B", "C", "D"];
const SUBJECT_GROUPS = ["Science", "Commerce", "Arts"];
const SUBJECTS = [
  "Physics",
  "Chemistry",
  "Maths",
  "Biology",
  "English",
  "History",
];

const initialData = [
  {
    id: 1,
    session: "2024-25",
    className: "10",
    section: "A",
    subjectGroup: "Science",
    subject: "Physics",
    copiedBy: "Admin",
    date: "2026-05-29",
  },
];

export default function CopyOldLesson() {
  const [form, setForm] = useState({
    session: "",
    className: "",
    section: "",
    subjectGroup: "",
    subject: "",
  });

  const [errors, setErrors] = useState({});
  const [records, setRecords] = useState(initialData);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });

    setErrors({ ...errors, [e.target.name]: "" });
  };

  const validate = () => {
    let err = {};

    if (!form.session) err.session = "The Session field is required.";
    if (!form.className) err.className = "The Class field is required.";
    if (!form.section) err.section = "The Section field is required.";
    if (!form.subjectGroup)
      err.subjectGroup = "The Subject Group field is required.";
    if (!form.subject) err.subject = "The Subject field is required.";

    setErrors(err);
    return Object.keys(err).length === 0;
  };

  const handleSubmit = () => {
    if (!validate()) return;

    const newRecord = {
      id: Date.now(),
      ...form,
      copiedBy: "Admin",
      date: new Date().toISOString().split("T")[0],
    };

    setRecords([newRecord, ...records]);

    setForm({
      session: "",
      className: "",
      section: "",
      subjectGroup: "",
      subject: "",
    });
  };

  return (
    <>
      <style>{`
        *{
          box-sizing:border-box;
          font-family:Arial;
        }

        body{
          margin:0;
          background:#0f172a;
        }

        .container{
          padding:24px;
          color:white;
        }

        .card{
          background:#111827;
          padding:24px;
          border-radius:16px;
          border:1px solid #1f2937;
          margin-bottom:24px;
        }

        .title{
          font-size:22px;
          font-weight:700;
          margin-bottom:18px;
        }

        .grid{
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
          gap:14px;
        }

        label{
          font-size:12px;
          color:#94a3b8;
          margin-bottom:6px;
          display:block;
        }

        select{
          width:100%;
          padding:10px;
          border-radius:10px;
          background:#0b1220;
          color:white;
          border:1px solid #334155;
          outline:none;
        }

        .error{
          color:#ef4444;
          font-size:12px;
          margin-top:4px;
        }

        .btn{
          margin-top:18px;
          padding:10px 18px;
          background:#3b82f6;
          color:white;
          border:none;
          border-radius:10px;
          cursor:pointer;
        }

        table{
          width:100%;
          border-collapse:collapse;
        }

        th,td{
          padding:10px;
          border-bottom:1px solid #1f2937;
          text-align:left;
          font-size:13px;
        }

        th{
          color:#94a3b8;
        }

        .tag{
          padding:4px 10px;
          border-radius:20px;
          background:#1e293b;
          font-size:12px;
        }
      `}</style>

      <div className="container">
        {/* FORM */}
        <div className="card">
          <div className="title">📚 Copy Old Lesson</div>

          <div className="grid">
            {/* SESSION */}
            <div>
              <label>Session *</label>
              <select
                name="session"
                value={form.session}
                onChange={handleChange}
              >
                <option value="">Select</option>
                {SESSIONS.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
              {errors.session && <div className="error">{errors.session}</div>}
            </div>

            {/* CLASS */}
            <div>
              <label>Class *</label>
              <select
                name="className"
                value={form.className}
                onChange={handleChange}
              >
                <option value="">Select</option>
                {CLASSES.map((c) => (
                  <option key={c}>{c}</option>
                ))}
              </select>
              {errors.className && (
                <div className="error">{errors.className}</div>
              )}
            </div>

            {/* SECTION */}
            <div>
              <label>Section *</label>
              <select
                name="section"
                value={form.section}
                onChange={handleChange}
              >
                <option value="">Select</option>
                {SECTIONS.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
              {errors.section && <div className="error">{errors.section}</div>}
            </div>

            {/* SUBJECT GROUP */}
            <div>
              <label>Subject Group *</label>
              <select
                name="subjectGroup"
                value={form.subjectGroup}
                onChange={handleChange}
              >
                <option value="">Select</option>
                {SUBJECT_GROUPS.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
              {errors.subjectGroup && (
                <div className="error">{errors.subjectGroup}</div>
              )}
            </div>

            {/* SUBJECT */}
            <div>
              <label>Subject *</label>
              <select
                name="subject"
                value={form.subject}
                onChange={handleChange}
              >
                <option value="">Select</option>
                {SUBJECTS.map((s) => (
                  <option key={s}>{s}</option>
                ))}
              </select>
              {errors.subject && <div className="error">{errors.subject}</div>}
            </div>
          </div>

          <button className="btn" onClick={handleSubmit}>
            Copy Lesson
          </button>
        </div>

        {/* TABLE */}
        <div className="card">
          <div className="title">📄 Copied Lessons</div>

          <table>
            <thead>
              <tr>
                <th>Session</th>
                <th>Class</th>
                <th>Section</th>
                <th>Group</th>
                <th>Subject</th>
                <th>Date</th>
                <th>By</th>
              </tr>
            </thead>

            <tbody>
              {records.map((r) => (
                <tr key={r.id}>
                  <td>
                    <span className="tag">{r.session}</span>
                  </td>
                  <td>{r.className}</td>
                  <td>{r.section}</td>
                  <td>{r.subjectGroup}</td>
                  <td>{r.subject}</td>
                  <td>{r.date}</td>
                  <td>{r.copiedBy}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}
