"use client"

import { useState } from "react"
import { createActivity, createPlannerTask } from "@/app/actions"

export default function TaskManager({ kids, activities }: { kids: any[], activities: any[] }) {
  const [activeTab, setActiveTab] = useState<"planner" | "activities">("planner")

  // Planner state
  const [selectedKid, setSelectedKid] = useState(kids[0]?.id || "")
  const [taskTitle, setTaskTitle] = useState("")
  const [taskTime, setTaskTime] = useState("")
  const [selectedActivity, setSelectedActivity] = useState("")

  // Activity state
  const [activityName, setActivityName] = useState("")
  const [activityDesc, setActivityDesc] = useState("")

  const handleAddActivity = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!activityName) return
    await createActivity(activityName, activityDesc)
    setActivityName("")
    setActivityDesc("")
  }

  const handleAddTask = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!taskTitle || !selectedKid) return
    await createPlannerTask({
      title: taskTitle,
      date: new Date(),
      startTime: taskTime,
      kidId: selectedKid,
      activityId: selectedActivity
    })
    setTaskTitle("")
    setTaskTime("")
    setSelectedActivity("")
  }

  return (
    <div className="card" style={{ maxWidth: "100%", padding: "1.5rem" }}>
      <div style={{ display: "flex", gap: "1rem", marginBottom: "1.5rem", borderBottom: "1px solid var(--border)", paddingBottom: "1rem" }}>
        <button 
          className="btn" 
          style={{ background: activeTab === "planner" ? "var(--primary)" : "var(--border)", color: activeTab === "planner" ? "white" : "var(--foreground)" }}
          onClick={() => setActiveTab("planner")}
        >
          Daily Planner
        </button>
        <button 
          className="btn" 
          style={{ background: activeTab === "activities" ? "var(--primary)" : "var(--border)", color: activeTab === "activities" ? "white" : "var(--foreground)" }}
          onClick={() => setActiveTab("activities")}
        >
          Activities library
        </button>
      </div>

      {activeTab === "planner" && (
        <div>
          <h2 className="title" style={{ fontSize: "1.5rem" }}>Add Task to Planner</h2>
          <form onSubmit={handleAddTask} className="form-group" style={{ marginTop: "1rem" }}>
            <select className="input" value={selectedKid} onChange={e => setSelectedKid(e.target.value)} required>
              <option value="" disabled>Select Kid</option>
              {kids.map(k => <option key={k.id} value={k.id}>{k.name}</option>)}
            </select>
            
            <input 
              type="text" 
              placeholder="Task Title (e.g., Morning Routine)" 
              className="input" 
              value={taskTitle}
              onChange={e => setTaskTitle(e.target.value)}
              required
            />
            
            <input 
              type="text" 
              placeholder="Time (Optional, e.g., 10:00 AM)" 
              className="input"
              value={taskTime}
              onChange={e => setTaskTime(e.target.value)}
            />

            <select className="input" value={selectedActivity} onChange={e => setSelectedActivity(e.target.value)}>
              <option value="">Link to Activity (Optional)</option>
              {activities.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
            
            <button type="submit" className="btn">Add Task</button>
          </form>

          <div style={{ marginTop: "2rem" }}>
            <h3 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "1rem" }}>Today's Tasks</h3>
            {kids.map(kid => (
              <div key={kid.id} style={{ marginBottom: "1.5rem" }}>
                <h4 style={{ color: "var(--primary)", fontWeight: "bold" }}>{kid.name}</h4>
                {kid.plannerTasks.length === 0 ? <p style={{ fontSize: "0.9rem", opacity: 0.7 }}>No tasks scheduled.</p> : (
                  <ul style={{ listStyle: "none", padding: 0, display: "flex", flexDirection: "column", gap: "0.5rem", marginTop: "0.5rem" }}>
                    {kid.plannerTasks.map((t: any) => (
                      <li key={t.id} style={{ background: "var(--background)", padding: "0.75rem", borderRadius: "8px", border: "1px solid var(--border)", display: "flex", justifyContent: "space-between" }}>
                        <div>
                          <strong>{t.title}</strong>
                          {t.startTime && <span style={{ marginLeft: "0.5rem", fontSize: "0.8rem", background: "var(--primary)", color: "white", padding: "2px 6px", borderRadius: "4px" }}>{t.startTime}</span>}
                        </div>
                        {t.activity && <span style={{ fontSize: "0.8rem", color: "var(--primary)" }}>🔗 {t.activity.name}</span>}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {activeTab === "activities" && (
        <div>
          <h2 className="title" style={{ fontSize: "1.5rem" }}>Activities Library</h2>
          <p style={{ fontSize: "0.9rem", marginBottom: "1rem", opacity: 0.8 }}>Create activities (e.g. Acting Class) and attach materials (songs, scripts) to them.</p>
          
          <form onSubmit={handleAddActivity} className="form-group">
            <input 
              type="text" 
              placeholder="Activity Name" 
              className="input" 
              value={activityName}
              onChange={e => setActivityName(e.target.value)}
              required
            />
            <textarea 
              placeholder="Description" 
              className="input" 
              style={{ minHeight: "80px" }}
              value={activityDesc}
              onChange={e => setActivityDesc(e.target.value)}
            />
            <button type="submit" className="btn">Create Activity</button>
          </form>

          <div style={{ marginTop: "2rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
            {activities.map(a => (
              <div key={a.id} style={{ padding: "1rem", border: "1px solid var(--border)", borderRadius: "8px", textAlign: "left" }}>
                <h4 style={{ fontWeight: "bold", color: "var(--primary)" }}>{a.name}</h4>
                <p style={{ fontSize: "0.9rem", opacity: 0.8 }}>{a.description}</p>
                <div style={{ marginTop: "0.5rem" }}>
                  {/* We would add material uploader here later */}
                  <span style={{ fontSize: "0.8rem", background: "#f1f5f9", padding: "4px 8px", borderRadius: "4px" }}>0 Materials</span>
                </div>
              </div>
            ))}
            {activities.length === 0 && <p>No activities created yet.</p>}
          </div>
        </div>
      )}
    </div>
  )
}