import { useState } from "react";
import { KIDS, DAYS, STATUSES, SUBJECTS, SOURCES, SUBJECT_ICONS } from "./data/constants";
import { useTasks } from "./hooks/useTasks";
import "./App.css";

function getWeekDates() {
  const today = new Date();
  const monday = new Date(today);
  monday.setDate(today.getDate() - ((today.getDay() + 6) % 7));
  return Array.from({ length: 5 }, (_, i) => {
    const d = new Date(monday);
    d.setDate(monday.getDate() + i);
    return d;
  });
}

const EMPTY_FORM = { subject: "", title: "", status: "new", due: "", source: "Notebook", type: "homework" };

export default function App() {
  const [activeKid, setActiveKid] = useState("abdulla");
  const [activeDay, setActiveDay] = useState(() => {
    const d = new Date().getDay();
    return d >= 1 && d <= 5 ? d - 1 : 0;
  });
  const [activeTab, setActiveTab] = useState("homework");
  const [showForm, setShowForm] = useState(false);
  const [form, setForm] = useState(EMPTY_FORM);

  const { tasks, addTask, updateStatus, removeTask } = useTasks();
  const weekDates = getWeekDates();
  const today = new Date();
  const kid = KIDS.find((k) => k.id === activeKid);
  const kidTasks = tasks[activeKid] || [];
  const filtered = kidTasks.filter((t) => t.type === activeTab);
  const dayTasks = kidTasks.filter(
    (t) => new Date(t.due).toDateString() === weekDates[activeDay]?.toDateString()
  );

  const stats = {
    new: kidTasks.filter((t) => t.status === "new").length,
    inprogress: kidTasks.filter((t) => t.status === "inprogress").length,
    completed: kidTasks.filter((t) => t.status === "completed").length,
  };

  function handleAddTask() {
    if (!form.title || !form.subject || !form.due) return;
    addTask(activeKid, form);
    setForm(EMPTY_FORM);
    setShowForm(false);
    setActiveTab(form.type);
  }

  return (
    <div className="app">
      {/* Header */}
      <header className="header" style={{ background: `linear-gradient(135deg, ${kid.color} 0%, #185FA5 100%)` }}>
        <div className="header-logo">
          <div className="logo-box">ASCS</div>
          <div>
            <div className="school-name">American School of Creativity Science</div>
            <div className="app-subtitle">Homework Tracker 📚</div>
          </div>
        </div>
        <div className="header-date">
          {today.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })}
        </div>
      </header>

      {/* Kid Switcher */}
      <section className="kid-switcher">
        {KIDS.map((k) => (
          <button
            key={k.id}
            className={`kid-btn ${activeKid === k.id ? "active" : ""}`}
            style={{
              borderColor: activeKid === k.id ? k.color : "transparent",
              background: activeKid === k.id ? k.light : "#f5f5f5",
            }}
            onClick={() => setActiveKid(k.id)}
          >
            <span className="kid-emoji">{k.emoji}</span>
            <span className="kid-name" style={{ color: k.color }}>{k.name}</span>
            <span className="kid-grade">{k.grade}</span>
            <div className="kid-badges">
              {STATUSES.map((s) => {
                const cnt = (tasks[k.id] || []).filter((t) => t.status === s.id).length;
                return cnt > 0 ? (
                  <span key={s.id} className="badge" style={{ background: s.bg, color: s.text }}>{cnt}</span>
                ) : null;
              })}
            </div>
          </button>
        ))}
      </section>

      {/* Weekly Calendar */}
      <section className="calendar-section">
        <div className="section-label">📅 This Week</div>
        <div className="calendar-row">
          {weekDates.map((d, i) => {
            const isToday = d.toDateString() === today.toDateString();
            const hasTasks = kidTasks.filter((t) => new Date(t.due).toDateString() === d.toDateString()).length;
            return (
              <button
                key={i}
                className={`day-btn ${activeDay === i ? "active" : ""} ${isToday ? "today" : ""}`}
                style={{
                  borderColor: activeDay === i ? kid.color : isToday ? kid.color + "66" : "#e5e5e5",
                  background: activeDay === i ? kid.color : isToday ? kid.light : "white",
                }}
                onClick={() => setActiveDay(i)}
              >
                <span className="day-name" style={{ color: activeDay === i ? "white" : "#888" }}>{DAYS[i]}</span>
                <span className="day-num" style={{ color: activeDay === i ? "white" : isToday ? kid.color : "#333" }}>{d.getDate()}</span>
                {hasTasks > 0 && (
                  <span className="day-dot" style={{ background: activeDay === i ? "rgba(255,255,255,0.8)" : kid.color }} />
                )}
              </button>
            );
          })}
        </div>
        {dayTasks.length > 0 && (
          <div className="day-summary" style={{ background: kid.light, color: kid.dark }}>
            <strong>Due {weekDates[activeDay]?.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}:</strong>{" "}
            {dayTasks.map((t) => t.title).join(" • ")}
          </div>
        )}
      </section>

      {/* Stats */}
      <section className="stats-row">
        {STATUSES.map((s) => (
          <div key={s.id} className="stat-card" style={{ background: s.bg }}>
            <span className="stat-num" style={{ color: s.text }}>{stats[s.id]}</span>
            <span className="stat-label" style={{ color: s.text }}>{s.label}</span>
          </div>
        ))}
      </section>

      {/* Tabs + Add button */}
      <div className="tab-row">
        {["homework", "project"].map((tab) => (
          <button key={tab} className={`tab-btn ${activeTab === tab ? "active" : ""}`}
            style={{ background: activeTab === tab ? kid.color : "#f0f0f0", color: activeTab === tab ? "white" : "#666" }}
            onClick={() => setActiveTab(tab)}>
            {tab === "homework" ? "📝 Homework" : "🎨 Projects"}
          </button>
        ))}
        <button className="add-btn" style={{ background: kid.color }}
          onClick={() => { setForm({ ...EMPTY_FORM, type: activeTab }); setShowForm(true); }}>
          + Add
        </button>
      </div>

      {/* Add Form */}
      {showForm && (
        <div className="form-card" style={{ borderColor: kid.color }}>
          <div className="form-title" style={{ color: kid.color }}>
            ➕ New {form.type === "homework" ? "Homework" : "Project"} for {kid.name}
          </div>
          <div className="form-grid">
            <select value={form.subject} onChange={(e) => setForm((f) => ({ ...f, subject: e.target.value }))}>
              <option value="">📚 Select Subject</option>
              {SUBJECTS[activeKid].map((s) => <option key={s}>{s}</option>)}
            </select>
            <select value={form.status} onChange={(e) => setForm((f) => ({ ...f, status: e.target.value }))}>
              {STATUSES.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}
            </select>
            <input className="full-span" placeholder="Assignment title / description..."
              value={form.title} onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))} />
            <input type="date" value={form.due} onChange={(e) => setForm((f) => ({ ...f, due: e.target.value }))} />
            <select value={form.source} onChange={(e) => setForm((f) => ({ ...f, source: e.target.value }))}>
              {SOURCES.map((s) => <option key={s}>{s}</option>)}
            </select>
            <select value={form.type} onChange={(e) => setForm((f) => ({ ...f, type: e.target.value }))}>
              <option value="homework">Homework</option>
              <option value="project">Project</option>
            </select>
          </div>
          <div className="form-actions">
            <button className="save-btn" style={{ background: kid.color }} onClick={handleAddTask}>Save ✓</button>
            <button className="cancel-btn" onClick={() => setShowForm(false)}>Cancel</button>
          </div>
        </div>
      )}

      {/* Task List */}
      <section className="task-list">
        {filtered.length === 0 && (
          <div className="empty-state" style={{ background: kid.light, color: kid.dark }}>
            <div className="empty-emoji">{activeTab === "homework" ? "🎉" : "🌟"}</div>
            <div className="empty-title">No {activeTab}s yet!</div>
            <div className="empty-sub">Tap + Add to add one</div>
          </div>
        )}
        {filtered.map((task) => {
          const st = STATUSES.find((s) => s.id === task.status);
          const dueDate = new Date(task.due);
          const isOverdue = dueDate < today && task.status !== "completed";
          return (
            <div key={task.id} className={`task-card ${isOverdue ? "overdue" : ""}`}>
              <div className="task-icon" style={{ background: kid.light }}>
                {SUBJECT_ICONS[task.subject] || "📚"}
              </div>
              <div className="task-body">
                <div className="task-title">{task.title}</div>
                <div className="task-meta">
                  <span className="badge" style={{ background: kid.light, color: kid.dark }}>{task.subject}</span>
                  <span className="badge" style={{ background: st.bg, color: st.text }}>{st.label}</span>
                  <span className="task-due" style={{ color: isOverdue ? "#E24B4A" : "#888" }}>
                    {isOverdue ? "⚠️ " : "📅 "}
                    {dueDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                  </span>
                  <span className="task-source">via {task.source}</span>
                </div>
              </div>
              <div className="task-actions">
                <select value={task.status}
                  style={{ borderColor: kid.color, color: kid.dark }}
                  onChange={(e) => updateStatus(activeKid, task.id, e.target.value)}>
                  {STATUSES.map((s) => <option key={s.id} value={s.id}>{s.label}</option>)}
                </select>
                <button className="remove-btn" onClick={() => removeTask(activeKid, task.id)}>✕</button>
              </div>
            </div>
          );
        })}
      </section>

      <footer className="footer">ASCS Homework Tracker • Made with ❤️ for Abdulla & Salama</footer>
    </div>
  );
}