"use client"

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

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 style={{ width: "100%" }}>
      <div className="segmented-control">
        <button 
          className={`segmented-control-btn ${activeTab === "planner" ? "active" : ""}`}
          onClick={() => setActiveTab("planner")}
        >
          Daily Planner
        </button>
        <button 
          className={`segmented-control-btn ${activeTab === "activities" ? "active" : ""}`}
          onClick={() => setActiveTab("activities")}
        >
          Activities Library
        </button>
      </div>

      {activeTab === "planner" && (
        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
          <div>
            <h2 style={{ fontSize: "1.3rem", fontWeight: "600", marginBottom: "0.75rem", paddingLeft: "0.5rem" }}>Add Task to Planner</h2>
            <div className="ios-list">
              <form onSubmit={handleAddTask} style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "1rem" }}>
                <select className="input" style={{ border: "none", background: "var(--background)" }} 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" 
                  style={{ border: "none", background: "var(--background)" }}
                  value={taskTitle}
                  onChange={e => setTaskTitle(e.target.value)}
                  required
                />
                
                <input 
                  type="text" 
                  placeholder="Time (Optional, e.g., 10:00 AM)" 
                  className="input"
                  style={{ border: "none", background: "var(--background)" }}
                  value={taskTime}
                  onChange={e => setTaskTime(e.target.value)}
                />

                <select className="input" style={{ border: "none", background: "var(--background)" }} 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" style={{ width: "100%" }}>Add Task</button>
              </form>
            </div>
          </div>

          <div>
            <h3 style={{ fontSize: "1.3rem", fontWeight: "600", marginBottom: "0.75rem", paddingLeft: "0.5rem" }}>Today's Tasks</h3>
            {kids.map(kid => (
              <div key={kid.id} style={{ marginBottom: "1.5rem" }}>
                <h4 style={{ color: "var(--primary)", fontWeight: "600", marginBottom: "0.5rem", paddingLeft: "0.5rem" }}>{kid.name}</h4>
                {kid.plannerTasks.length === 0 ? (
                  <div className="ios-list">
                    <div className="ios-list-item" style={{ justifyContent: "center", color: "var(--foreground)", opacity: 0.6 }}>
                      No tasks scheduled.
                    </div>
                  </div>
                ) : (
                  <div className="ios-list">
                    {kid.plannerTasks.map((t: any) => (
                      <div key={t.id} className="ios-list-item">
                        <div className="ios-list-item-content">
                          <span className="ios-list-item-title">{t.title}</span>
                          {t.activity && <span className="ios-list-item-subtitle" style={{ color: "var(--primary)" }}>🔗 {t.activity.name}</span>}
                        </div>
                        {t.startTime && (
                          <div style={{ fontSize: "0.9rem", background: "var(--background)", color: "var(--foreground)", padding: "4px 8px", borderRadius: "100px", fontWeight: "500", border: "1px solid var(--border)" }}>
                            {t.startTime}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {activeTab === "activities" && (
        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
          <div>
            <h2 style={{ fontSize: "1.3rem", fontWeight: "600", marginBottom: "0.25rem", paddingLeft: "0.5rem" }}>Activities Library</h2>
            <p style={{ fontSize: "0.95rem", marginBottom: "1rem", paddingLeft: "0.5rem", opacity: 0.7 }}>Create activities (e.g. Acting Class) and attach materials (songs, scripts) to them.</p>
            
            <div className="ios-list">
              <form onSubmit={handleAddActivity} style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "1rem" }}>
                <input 
                  type="text" 
                  placeholder="Activity Name" 
                  className="input" 
                  style={{ border: "none", background: "var(--background)" }}
                  value={activityName}
                  onChange={e => setActivityName(e.target.value)}
                  required
                />
                <textarea 
                  placeholder="Description" 
                  className="input" 
                  style={{ minHeight: "80px", border: "none", background: "var(--background)", resize: "none" }}
                  value={activityDesc}
                  onChange={e => setActivityDesc(e.target.value)}
                />
                <button type="submit" className="btn" style={{ width: "100%" }}>Create Activity</button>
              </form>
            </div>
          </div>

          <div>
            {activities.length === 0 ? (
              <div className="ios-list">
                <div className="ios-list-item" style={{ justifyContent: "center", color: "var(--foreground)", opacity: 0.6 }}>
                  No activities created yet.
                </div>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
                {activities.map(a => (
                  <div key={a.id} className="ios-list" style={{ marginBottom: 0 }}>
                    <div style={{ padding: "1.25rem", borderBottom: "1px solid var(--border)" }}>
                      <h4 style={{ fontWeight: "600", fontSize: "1.2rem", color: "var(--primary)" }}>{a.name}</h4>
                      {a.description && <p style={{ fontSize: "0.95rem", opacity: 0.8, marginTop: "0.25rem" }}>{a.description}</p>}
                    </div>
                    <div style={{ padding: "0 1.25rem 1.25rem" }}>
                      <div style={{ marginTop: "1rem" }}>
                        <MaterialManager activity={a} />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}