import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { useToast } from "@/hooks/use-toast";

function loadSettings() {
  try { return JSON.parse(localStorage.getItem("encoach_settings") || "{}"); } catch { return {}; }
}

export default function AdminSettings() {
  const { toast } = useToast();
  const saved = loadSettings();
  const [platformName, setPlatformName] = useState<string>(saved.platformName ?? "EnCoach");
  const [supportEmail, setSupportEmail] = useState<string>(saved.supportEmail ?? "support@encoach.com");
  const [maxStudents, setMaxStudents] = useState<string>(saved.maxStudents ?? "30");
  const [aiEnabled, setAiEnabled] = useState<boolean>(saved.aiEnabled ?? true);
  const [selfReg, setSelfReg] = useState<boolean>(saved.selfReg ?? true);
  const [emailNotif, setEmailNotif] = useState<boolean>(saved.emailNotif ?? true);
  const [minScore, setMinScore] = useState<string>(saved.minScore ?? "0");
  const [maxScore, setMaxScore] = useState<string>(saved.maxScore ?? "100");
  const [passThreshold, setPassThreshold] = useState<string>(saved.passThreshold ?? "60");

  const handleSave = () => {
    const data = { platformName, supportEmail, maxStudents, aiEnabled, selfReg, emailNotif, minScore, maxScore, passThreshold };
    localStorage.setItem("encoach_settings", JSON.stringify(data));
    toast({ title: "Settings saved", description: "Platform settings have been updated." });
  };

  return (
    <div className="space-y-6 max-w-2xl">
      <div>
        <h1 className="text-2xl font-bold">Platform Settings</h1>
        <p className="text-muted-foreground">Configure platform-wide settings.</p>
      </div>

      <Card>
        <CardHeader><CardTitle className="text-lg">General</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2"><Label>Platform Name</Label><Input value={platformName} onChange={e => setPlatformName(e.target.value)} /></div>
          <div className="space-y-2"><Label>Support Email</Label><Input value={supportEmail} onChange={e => setSupportEmail(e.target.value)} type="email" /></div>
          <div className="space-y-2"><Label>Max Students per Batch</Label><Input value={maxStudents} onChange={e => setMaxStudents(e.target.value)} type="number" /></div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader><CardTitle className="text-lg">Features</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div><Label>AI Features</Label><p className="text-xs text-muted-foreground">Enable AI-powered insights and suggestions</p></div>
            <Switch checked={aiEnabled} onCheckedChange={setAiEnabled} />
          </div>
          <div className="flex items-center justify-between">
            <div><Label>Student Self-Registration</Label><p className="text-xs text-muted-foreground">Allow students to register themselves</p></div>
            <Switch checked={selfReg} onCheckedChange={setSelfReg} />
          </div>
          <div className="flex items-center justify-between">
            <div><Label>Email Notifications</Label><p className="text-xs text-muted-foreground">Send email notifications for assignments and grades</p></div>
            <Switch checked={emailNotif} onCheckedChange={setEmailNotif} />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader><CardTitle className="text-lg">Grading</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-3 gap-4">
            <div className="space-y-2"><Label>Min Score</Label><Input value={minScore} onChange={e => setMinScore(e.target.value)} type="number" /></div>
            <div className="space-y-2"><Label>Max Score</Label><Input value={maxScore} onChange={e => setMaxScore(e.target.value)} type="number" /></div>
            <div className="space-y-2"><Label>Pass Threshold</Label><Input value={passThreshold} onChange={e => setPassThreshold(e.target.value)} type="number" /></div>
          </div>
        </CardContent>
      </Card>

      <Button onClick={handleSave}>Save Settings</Button>
    </div>
  );
}
