"use client";

import Link from "next/link";
import { useEffect } from "react";
import { Bell, CalendarClock, FileText, Globe, Key, ShieldCheck, Trash2 } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { useSettingsStore, useMeetingsStore } from "@/store";
import { PageHeader } from "@/components/ui/page-components";
import { SimpleTooltip } from "@/components/ui/tooltip";

export default function SettingsPage() {
  const {
    language, setLanguage,
    speakerIdentification, setSpeakerIdentification,
    autoGenerateSummary, setAutoGenerateSummary,
    notifyOnComplete, setNotifyOnComplete,
    notifyOnSummary, setNotifyOnSummary,
    notifyActionItems, setNotifyActionItems,
    calendarEventBotSync,
    isCalendarEventBotSyncLoading,
    isCalendarEventBotSyncSaving,
    fetchCalendarEventBotSync,
    updateCalendarEventBotSync,
    summaryModel, setSummaryModel,
  } = useSettingsStore();

  const setMeetings = useMeetingsStore((s) => s.setMeetings);

  useEffect(() => {
    fetchCalendarEventBotSync();
  }, [fetchCalendarEventBotSync]);
 
  return (
    <div className="max-w-2xl space-y-6">
      <PageHeader
        title="Settings"
        description="Manage your preferences and integrations"
      />

      {/* Notifications */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
	            <SimpleTooltip content="Notification settings">
	              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50">
	                <Bell className="h-4 w-4 text-blue-600" />
	              </div>
	            </SimpleTooltip>
            <div>
              <CardTitle className="text-base">Notifications</CardTitle>
              <CardDescription>Configure when you receive alerts</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          {[
            { id: "n1", label: "Meeting completed",      desc: "When transcription finishes",       value: notifyOnComplete, onChange: setNotifyOnComplete },
            { id: "n2", label: "Summary ready",          desc: "When AI summary is generated",      value: notifyOnSummary,  onChange: setNotifyOnSummary },
            { id: "n3", label: "Action item reminders",  desc: "Daily digest of pending items",     value: notifyActionItems, onChange: setNotifyActionItems },
          ].map(({ id, label, desc, value, onChange }) => (
            <div key={id} className="flex items-center justify-between py-1">
              <div>
                <Label htmlFor={id} className="font-medium cursor-pointer">{label}</Label>
                <p className="text-xs text-gray-500 mt-0.5">{desc}</p>
              </div>
              <Switch id={id} checked={value} onCheckedChange={onChange} />
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Calendar Automation */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
	            <SimpleTooltip content="Calendar event bot sync settings">
	              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-50">
	                <CalendarClock className="h-4 w-4 text-amber-600" />
	              </div>
	            </SimpleTooltip>
            <div>
              <CardTitle className="text-base">Calendar Automation</CardTitle>
              <CardDescription>Control meeting bot auto-join behavior</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between py-1">
            <div>
              <Label htmlFor="calendarEventBotSync" className="font-medium cursor-pointer">
                Bot calendar event sync
              </Label>
              <p className="text-xs text-gray-500 mt-0.5">
                Auto-join Teams, Meet, and Zoom calls created from your calendar events
              </p>
            </div>
            <Switch
              id="calendarEventBotSync"
              checked={calendarEventBotSync}
              disabled={isCalendarEventBotSyncLoading || isCalendarEventBotSyncSaving}
              onCheckedChange={updateCalendarEventBotSync}
            />
          </div>
        </CardContent>
      </Card>

      {/* Transcription */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
	            <SimpleTooltip content="Transcription settings">
	              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-50">
	                <Globe className="h-4 w-4 text-purple-600" />
	              </div>
	            </SimpleTooltip>
            <div>
              <CardTitle className="text-base">Transcription</CardTitle>
              <CardDescription>Language and quality settings</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-5">
          <div className="space-y-2">
            <Label>Primary Language</Label>
	            <Select value={language} onValueChange={(v) => setLanguage(v as typeof language)}>
	              <SimpleTooltip content="Select language for transcription">
	                <SelectTrigger><SelectValue /></SelectTrigger>
	              </SimpleTooltip>
              <SelectContent>
                <SelectItem value="en">English</SelectItem>
                <SelectItem value="es">Spanish</SelectItem>
                <SelectItem value="fr">French</SelectItem>
                <SelectItem value="de">German</SelectItem>
                <SelectItem value="ja">Japanese</SelectItem>
              </SelectContent>
            </Select>
          </div>
          {[
            { label: "Speaker Identification", desc: "Automatically label speakers",           checked: speakerIdentification, onChange: setSpeakerIdentification },
            { label: "Auto-generate Summary",  desc: "Generate AI summary after meeting ends", checked: autoGenerateSummary,    onChange: setAutoGenerateSummary },
          ].map(({ label, desc, checked, onChange }) => (
            <div key={label} className="flex items-center justify-between py-1">
              <div>
                <Label className="font-medium">{label}</Label>
                <p className="text-xs text-gray-500 mt-0.5">{desc}</p>
              </div>
              <Switch checked={checked} onCheckedChange={onChange} />
            </div>
          ))}
        </CardContent>
      </Card>

      {/* API */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
	            <SimpleTooltip content="API integration settings">
	              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-green-50">
	                <Key className="h-4 w-4 text-green-600" />
	              </div>
	            </SimpleTooltip>
            <div>
              <CardTitle className="text-base">API Integration</CardTitle>
              <CardDescription>Connect your AI provider</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="apiKey">OpenAI API Key</Label>
	            <SimpleTooltip content="Enter your OpenAI API key, usually starting with sk-">
	              <Input id="apiKey" type="password" placeholder="sk-••••••••••••••••" />
	            </SimpleTooltip>
          </div>
          <div className="space-y-2">
            <Label>Summary Model</Label>
	            <Select value={summaryModel} onValueChange={(v) => setSummaryModel(v as typeof summaryModel)}>
	              <SimpleTooltip content="Choose AI model for generating summaries">
	                <SelectTrigger><SelectValue /></SelectTrigger>
	              </SimpleTooltip>
              <SelectContent>
                <SelectItem value="gpt-4o">GPT-4o</SelectItem>
                <SelectItem value="gpt-4o-mini">GPT-4o Mini</SelectItem>
                <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
              </SelectContent>
            </Select>
          </div>
	          <SimpleTooltip content="Save and validate API settings">
	            <Button>Save API Settings</Button>
	          </SimpleTooltip>
        </CardContent>
      </Card>

      {/* Legal */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <SimpleTooltip content="Legal and privacy information">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-50">
                <ShieldCheck className="h-4 w-4 text-sky-600" />
              </div>
            </SimpleTooltip>
            <div>
              <CardTitle className="text-base">Legal</CardTitle>
              <CardDescription>Review how meeting data is handled</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-3">
          <Button variant="outline" className="w-full justify-start gap-2" asChild>
            <Link href="/privacy-policy?from=/settings">
              <ShieldCheck className="h-4 w-4" />
              Privacy Policy
            </Link>
          </Button>
          <Button variant="outline" className="w-full justify-start gap-2" asChild>
            <Link href="/terms-of-service?from=/settings">
              <FileText className="h-4 w-4" />
              Terms of Service
            </Link>
          </Button>
        </CardContent>
      </Card>

      {/* Danger Zone */}
      <Card className="border-red-200">
        <CardHeader>
          <div className="flex items-center gap-2">
	            <SimpleTooltip content="Danger zone">
	              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-50">
	                <Trash2 className="h-4 w-4 text-red-600" />
	              </div>
	            </SimpleTooltip>
            <div>
              <CardTitle className="text-base text-red-700">Danger Zone</CardTitle>
              <CardDescription>Irreversible actions</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Separator className="mb-4" />
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-900">Delete all meetings</p>
              <p className="text-xs text-gray-500 mt-0.5">Permanently remove all transcripts and summaries</p>
            </div>
	            <SimpleTooltip content="Delete all meetings and transcripts permanently. This cannot be undone.">
	              <Button variant="destructive" size="sm" onClick={() => setMeetings([])}>
	                Delete All
	              </Button>
	            </SimpleTooltip>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}