"use client"

import Link from "next/link"
import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays, Library, FileQuestion } from "lucide-react"
import { signOut } from "next-auth/react"

import { ThemePreferencesCard } from "@/modules/settings/components/theme-preferences-card"
import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
import { UserProfile } from "@/modules/users/data-access"

export function TeacherSettingsView({ user }: { user: UserProfile }) {
  return (
    <div className="flex h-full flex-col gap-8 p-8">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div className="space-y-1">
          <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
          <div className="text-sm text-muted-foreground">Manage your preferences and teaching workspace.</div>
        </div>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline">
            <Link href="/teacher/dashboard">Back to dashboard</Link>
          </Button>
        </div>
      </div>

      <Tabs defaultValue="general" className="w-full">
        <TabsList className="w-full justify-start">
          <TabsTrigger value="general" className="gap-2">
            <User className="h-4 w-4" />
            General
          </TabsTrigger>
          <TabsTrigger value="appearance" className="gap-2">
            <Palette className="h-4 w-4" />
            Appearance
          </TabsTrigger>
          <TabsTrigger value="security" className="gap-2">
            <Lock className="h-4 w-4" />
            Security
          </TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="mt-6 space-y-6">
          <ProfileSettingsForm user={user} />

          <Card>
            <CardHeader>
              <CardTitle>Quick links</CardTitle>
              <CardDescription>Jump to common teacher areas.</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-wrap gap-2">
              <Button asChild variant="outline">
                <Link href="/profile">Profile</Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/teacher/dashboard">
                  <LayoutDashboard className="h-4 w-4" />
                  Dashboard
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/teacher/textbooks">
                  <Library className="h-4 w-4" />
                  Textbooks
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/teacher/exams/all">
                  <FileQuestion className="h-4 w-4" />
                  Exams
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/teacher/homework/assignments">
                  <PenTool className="h-4 w-4" />
                  Homework
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/teacher/classes/schedule">
                  <CalendarDays className="h-4 w-4" />
                  Schedule
                </Link>
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="appearance" className="mt-6 space-y-6">
          <ThemePreferencesCard />
        </TabsContent>

        <TabsContent value="security" className="mt-6 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Session</CardTitle>
              <CardDescription>Account access and session controls.</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="space-y-1">
                <div className="text-sm font-medium">Sign out</div>
                <div className="text-sm text-muted-foreground">Return to the login screen.</div>
              </div>
              <Button variant="outline" onClick={() => signOut({ callbackUrl: "/login" })}>
                Log out
              </Button>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}