task-manager/client/src/pages/settings.tsx

import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation } from '@tanstack/react-query';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Globe, Tag, Plus, Edit, Trash2, Layers, User as UserIcon, ShieldCheck, Share2, Server, Copy, Settings as SettingsIcon, Bell } from 'lucide-react';
import { Switch } from '@/components/ui/switch';
import { ShareAccessModal } from '@/components/ShareAccessModal';
import { ChangePasswordModal } from '@/components/ChangePasswordModal';
import { UpdateProfileModal } from '@/components/UpdateProfileModal';
import { ShareLabelModal } from '@/components/ShareLabelModal';
import { Label } from '@shared/schema';
import { User } from '@shared/schema';
import { queryClient, apiRequest } from '@/lib/queryClient';
import { useToast } from '@/hooks/use-toast';
import { useLocation } from "wouter";
import { useNotifications } from '@/hooks/use-notifications';

const NotificationSettings = () => {
  const { t } = useTranslation();
  const { enabled, toggleEnabled, permission, requestPermission } = useNotifications({ poll: false });

  const handleToggle = (checked: boolean) => {
    if (checked && permission !== 'granted') {
      requestPermission();
    } else {
      toggleEnabled(checked);
    }
  };

  return (
    <div className="flex items-center justify-between">
      <div className="space-y-0.5">
        <p className="font-medium">{t('notifications.enableBrowser')}</p>
        <p className="text-sm text-muted-foreground">
          {permission === 'denied' ?
            <span className="text-destructive">Permission denied by browser. Please reset site permissions.</span> :
            t('notifications.description')
          }
        </p>
      </div>
      <Switch
        checked={enabled}
        onCheckedChange={handleToggle}
        disabled={permission === 'denied'}
      />
    </div>
  );
};

interface SettingsProps {
  onNavigateToTemplates: () => void;
}

export default function Settings({ onNavigateToTemplates }: SettingsProps) {
  const { t, i18n } = useTranslation();
  const { toast } = useToast();
  const [, setLocation] = useLocation();

  // Fetch user
  const { data: user } = useQuery<User>({
    queryKey: ['/api/user']
  });

  const [isLabelDialogOpen, setIsLabelDialogOpen] = useState(false);
  const [editingLabel, setEditingLabel] = useState<Label | null>(null);
  const [labelName, setLabelName] = useState('');
  const [labelColor, setLabelColor] = useState('#3B82F6');
  const [isShareAccessOpen, setIsShareAccessOpen] = useState(false);
  const [isShareLabelOpen, setIsShareLabelOpen] = useState(false);
  const [sharingLabel, setSharingLabel] = useState<Label | null>(null);
  const [isChangePasswordOpen, setIsChangePasswordOpen] = useState(false);
  const [isUpdateProfileOpen, setIsUpdateProfileOpen] = useState(false);

  const handleLanguageChange = (value: string) => {
    i18n.changeLanguage(value);
    localStorage.setItem('taskflow-language', value);
    console.log('Language changed to:', value);
  };

  const privacyMutation = useMutation({
    mutationFn: async (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
      const res = await apiRequest("PATCH", "/api/user/privacy", updates);
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
      toast({ title: "Settings updated" });
    },
  });

  const handlePrivacyUpdate = (updates: { showOnLeaderboard?: boolean; isSearchable?: boolean; aiEnabled?: boolean }) => {
    privacyMutation.mutate(updates);
  };

  // Fetch labels
  const { data: labels = [], isLoading: labelsLoading } = useQuery<Label[]>({
    queryKey: ['/api/labels']
  });

  // Create label mutation
  const createLabelMutation = useMutation({
    mutationFn: (data: { name: string; color: string }) =>
      apiRequest('POST', '/api/labels', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
      setIsLabelDialogOpen(false);
      setLabelName('');
      setLabelColor('#3B82F6');
      toast({
        title: t('settings.labels.created'),
        description: t('settings.labels.createdDescription'),
      });
    },
  });

  // Update label mutation
  const updateLabelMutation = useMutation({
    mutationFn: ({ id, ...data }: { id: string; name: string; color: string }) =>
      apiRequest('PATCH', `/api/labels/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
      setIsLabelDialogOpen(false);
      setEditingLabel(null);
      setLabelName('');
      setLabelColor('#3B82F6');
      toast({
        title: t('settings.labels.updated'),
        description: t('settings.labels.updatedDescription'),
      });
    },
  });

  // Delete label mutation
  const deleteLabelMutation = useMutation({
    mutationFn: (id: string) => apiRequest('DELETE', `/api/labels/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/api/labels'] });
      toast({
        title: t('settings.labels.deleted'),
        description: t('settings.labels.deletedDescription'),
      });
    },
  });

  const handleSaveLabel = () => {
    if (!labelName.trim()) return;

    if (editingLabel) {
      updateLabelMutation.mutate({
        id: editingLabel.id,
        name: labelName,
        color: labelColor,
      });
    } else {
      createLabelMutation.mutate({ name: labelName, color: labelColor });
    }
  };

  const handleEditLabel = (label: Label) => {
    setEditingLabel(label);
    setLabelName(label.name);
    setLabelColor(label.color);
    setIsLabelDialogOpen(true);
  };

  const handleDeleteLabel = (id: string) => {
    if (confirm(t('settings.labels.deleteConfirm'))) {
      deleteLabelMutation.mutate(id);
    }
  };

  const handleShareLabel = (label: Label) => {
    setSharingLabel(label);
    setIsShareLabelOpen(true);
  };

  const generateApiKeyMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/user/apikey", {});
      return res.json();
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
      toast({ title: t('settings.mcp.generated') });
    },
  });

  const revokeApiKeyMutation = useMutation({
    mutationFn: async () => {
      await apiRequest("DELETE", "/api/user/apikey");
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/user"] });
      toast({ title: t('settings.mcp.revoked') });
    },
  });

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    toast({ title: "Copied!" });
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold" data-testid="text-settings-title">
          {t('settings.title')}
        </h1>
      </div>

      {/* Account Settings */}
      <Card data-testid="card-account-settings">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserIcon className="w-5 h-5" />
            {t('settings.account.title')}
          </CardTitle>
          <CardDescription>
            {t('settings.account.description')}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-1">
            <p className="text-sm font-medium leading-none">{t('settings.account.username')}</p>
            <p className="text-sm text-muted-foreground">{user?.username || t('common.loading')}</p>
          </div>

          <div className="space-y-1" data-testid="container-email">
            <p className="text-sm font-medium leading-none">{t('auth.email')}</p>
            <div className="flex items-center gap-2">
              <p className="text-sm text-muted-foreground" data-testid="text-email">{user?.email || 'No email set'}</p>
              <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setIsUpdateProfileOpen(true)} data-testid="button-edit-email">
                <Edit className="h-3 w-3" />
              </Button>
            </div>
          </div>

          {user?.role === 'admin' && (
            <div className="space-y-1">
              <p className="text-sm font-medium leading-none">{t('settings.account.userId')}</p>
              <p className="text-sm text-muted-foreground font-mono">{user?.id || '...'}</p>
            </div>
          )}

          <div className="pt-2">
            <Button variant="outline" onClick={() => setIsChangePasswordOpen(true)} data-testid="button-change-password">
              {t('auth.changePassword')}
            </Button>
          </div>
        </CardContent>
      </Card>

      {user && (
        <>
          <UpdateProfileModal open={isUpdateProfileOpen} onOpenChange={setIsUpdateProfileOpen} user={user} />
          <ChangePasswordModal open={isChangePasswordOpen} onOpenChange={setIsChangePasswordOpen} />
        </>
      )}

      {/* Notifications Settings */}
      <Card data-testid="card-notifications">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bell className="w-5 h-5" />
            {t('notifications.title')}
          </CardTitle>
          <CardDescription>
            {t('notifications.description')}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <NotificationSettings />
        </CardContent>
      </Card>

      {/* Social & Privacy */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserIcon className="w-5 h-5" />
            {t('settings.social.title')}
          </CardTitle>
          <CardDescription>
            {t('settings.social.description')}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <p className="font-medium">{t('settings.social.publicLeaderboard')}</p>
              <p className="text-sm text-muted-foreground">{t('settings.social.publicLeaderboardDesc')}</p>
            </div>
            <Switch
              checked={user?.showOnLeaderboard}
              onCheckedChange={(checked) => handlePrivacyUpdate({ showOnLeaderboard: checked })}
            />
          </div>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <p className="font-medium">{t('settings.social.searchable')}</p>
              <p className="text-sm text-muted-foreground">{t('settings.social.searchableDesc')}</p>
            </div>
            <Switch
              checked={user?.isSearchable}
              onCheckedChange={(checked) => handlePrivacyUpdate({ isSearchable: checked })}
            />
          </div>
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <p className="font-medium">{t('settings.ai.enableUser')}</p>
              <p className="text-sm text-muted-foreground">{t('settings.ai.enableUserDesc')}</p>
            </div>
            <Switch
              checked={user?.aiEnabled}
              onCheckedChange={(checked) => handlePrivacyUpdate({ aiEnabled: checked })}
            />
          </div>
          <div className="pt-2">
            <Button variant="outline" onClick={() => setIsShareAccessOpen(true)}>
              <Share2 className="w-4 h-4 mr-2" />
              {t('settings.social.shareAccess')}
            </Button>
          </div>
        </CardContent>
      </Card>

      <ShareAccessModal open={isShareAccessOpen} onOpenChange={setIsShareAccessOpen} />

      {/* MCP Integration */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Server className="w-5 h-5" />
            {t('settings.mcp.title')}
          </CardTitle>
          <CardDescription>{t('settings.mcp.description')}</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <p className="font-medium">{t('settings.mcp.status')}</p>
            </div>
            <div className="flex items-center gap-2 text-green-500">
              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
              <span className="font-medium">{t('settings.mcp.running')}</span>
            </div>
          </div>

          <div className="space-y-2">
            <p className="text-sm font-medium">{t('settings.mcp.url')}</p>
            <div className="flex gap-2">
              <Input readOnly value={`${window.location.protocol}//${window.location.host}/api/mcp/sse`} />
              <Button variant="outline" size="icon" onClick={() => copyToClipboard(`${window.location.protocol}//${window.location.host}/api/mcp/sse`)}>
                <Copy className="w-4 h-4" />
              </Button>
            </div>
          </div>

          <div className="space-y-2">
            <p className="text-sm font-medium">{t('settings.mcp.apiKey')}</p>
            {user?.apiKey ? (
              <div className="flex gap-2">
                <Input type="password" readOnly value={user.apiKey} />
                {/* Show full key on click/copy only, usually concealed */}
                <Button variant="outline" size="icon" onClick={() => copyToClipboard(user.apiKey!)}>
                  <Copy className="w-4 h-4" />
                </Button>
                <Button variant="destructive" onClick={() => revokeApiKeyMutation.mutate()} disabled={revokeApiKeyMutation.isPending}>
                  {t('settings.mcp.revoke')}
                </Button>
              </div>
            ) : (
              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">{t('settings.mcp.noKey')}</p>
                <Button onClick={() => generateApiKeyMutation.mutate()} disabled={generateApiKeyMutation.isPending}>
                  {t('settings.mcp.generate')}
                </Button>
              </div>
            )}
          </div>

          <div className="bg-muted/50 p-3 rounded-lg text-sm text-muted-foreground">
            {t('settings.mcp.instructions')}
          </div>
        </CardContent>
      </Card>



      {/* Language Settings */}
      <Card data-testid="card-language-settings">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Globe className="w-5 h-5" />
            {t('settings.language.title')}
          </CardTitle>
          <CardDescription>
            {t('settings.language.description')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Select value={i18n.language} onValueChange={handleLanguageChange}>
            <SelectTrigger className="w-full sm:w-64" data-testid="select-language">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="en" data-testid="option-language-en">
                {t('settings.language.english')}
              </SelectItem>
              <SelectItem value="de" data-testid="option-language-de">
                {t('settings.language.german')}
              </SelectItem>
            </SelectContent>
          </Select>
        </CardContent>
      </Card>

      {/* Labels Management */}
      <Card data-testid="card-labels-management">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Tag className="w-5 h-5" />
                {t('settings.labels.title')}
              </CardTitle>
              <CardDescription>
                {t('settings.labels.description')}
              </CardDescription>
            </div>
            <Dialog open={isLabelDialogOpen} onOpenChange={setIsLabelDialogOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm" data-testid="button-create-label">
                  <Plus className="w-4 h-4 mr-2" />
                  {t('settings.labels.createLabel')}
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>
                    {editingLabel ? t('settings.labels.editLabel') : t('settings.labels.createNewLabel')}
                  </DialogTitle>
                </DialogHeader>
                <div className="space-y-4">
                  <div>
                    <Input
                      placeholder={t('settings.labels.labelNamePlaceholder')}
                      value={labelName}
                      onChange={(e) => setLabelName(e.target.value)}
                      data-testid="input-label-name"
                    />
                  </div>
                  <div>
                    <div className="flex items-center gap-3">
                      <input
                        type="color"
                        value={labelColor}
                        onChange={(e) => setLabelColor(e.target.value)}
                        className="w-12 h-8 rounded border cursor-pointer"
                        data-testid="input-label-color"
                      />
                      <Input
                        value={labelColor}
                        onChange={(e) => setLabelColor(e.target.value)}
                        placeholder="#3B82F6"
                        className="flex-1"
                        data-testid="input-label-color-text"
                      />
                    </div>
                  </div>
                  <div className="flex gap-3 pt-2">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setIsLabelDialogOpen(false);
                        setEditingLabel(null);
                        setLabelName('');
                        setLabelColor('#3B82F6');
                      }}
                      className="flex-1"
                      data-testid="button-cancel-label"
                    >
                      {t('settings.labels.cancel')}
                    </Button>
                    <Button
                      onClick={handleSaveLabel}
                      disabled={!labelName.trim() || createLabelMutation.isPending || updateLabelMutation.isPending}
                      className="flex-1"
                      data-testid="button-save-label"
                    >
                      {editingLabel ? t('settings.labels.update') : t('settings.labels.create')}
                    </Button>
                  </div>
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </CardHeader>
        <CardContent>
          {labelsLoading ? (
            <div className="flex items-center justify-center p-8">
              <div className="text-muted-foreground">{t('settings.labels.loading')}</div>
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {labels.map((label) => (
                <Card
                  key={label.id}
                  className="p-4 hover-elevate active-elevate-2"
                  style={{ borderLeft: `4px solid ${label.color}` }}
                  data-testid={`label-${label.id}`}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-4 h-4 rounded"
                        style={{ backgroundColor: label.color }}
                      />
                      <span className="font-medium text-sm" data-testid={`text-label-name-${label.id}`}>
                        {label.name}
                      </span>
                    </div>
                    <div className="flex items-center gap-1">
                      {label.creatorId === user?.id && (
                        <Button
                          variant="ghost"
                          size="icon"
                          className="w-6 h-6 text-muted-foreground hover:text-primary"
                          onClick={() => handleShareLabel(label)}
                          title={t('settings.labels.share')}
                        >
                          <Share2 className="w-3 h-3" />
                        </Button>
                      )}
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleEditLabel(label)}
                        className="w-6 h-6"
                        data-testid={`button-edit-${label.id}`}
                      >
                        <Edit className="w-3 h-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => handleDeleteLabel(label.id)}
                        className="w-6 h-6 text-destructive hover:text-destructive"
                        data-testid={`button-delete-${label.id}`}
                      >
                        <Trash2 className="w-3 h-3" />
                      </Button>
                    </div>
                  </div>
                </Card>
              ))}
              {labels.length === 0 && (
                <div className="col-span-full flex flex-col items-center justify-center p-8 text-center">
                  <Tag className="w-12 h-12 text-muted-foreground mb-4" />
                  <h3 className="font-medium text-muted-foreground mb-2">{t('settings.labels.noLabels')}</h3>
                  <p className="text-sm text-muted-foreground mb-4">
                    {t('settings.labels.noLabelsDescription')}
                  </p>
                  <Button
                    variant="outline"
                    onClick={() => setIsLabelDialogOpen(true)}
                    data-testid="button-create-first-label"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    {t('settings.labels.createLabel')}
                  </Button>
                </div>
              )}
            </div>
          )}
        </CardContent>
      </Card>

      <ShareLabelModal
        open={isShareLabelOpen}
        onOpenChange={setIsShareLabelOpen}
        label={sharingLabel}
        currentUser={user}
      />

      {/* Project Templates */}
      <Card data-testid="card-project-templates">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Layers className="w-5 h-5" />
            {t('settings.templates.title')}
          </CardTitle>
          <CardDescription>
            {t('settings.templates.description')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button
            onClick={onNavigateToTemplates}
            data-testid="button-manage-templates"
          >
            <Layers className="w-4 h-4 mr-2" />
            {t('settings.templates.manageTemplates')}
          </Button>
        </CardContent>
      </Card>

      {/* Admin Section */}
      {
        user?.role === 'admin' && (
          <Card className="border-destructive/20 bg-destructive/5">
            <CardHeader>
              <CardTitle className="flex items-center gap-2 text-destructive">
                <ShieldCheck className="w-5 h-5" />
                {t('settings.admin.title')}
              </CardTitle>
              <CardDescription>{t('settings.admin.description')}</CardDescription>
            </CardHeader>
            <CardContent className="flex flex-col sm:flex-row gap-4">
              <Button variant="outline" onClick={() => setLocation('/admin/users')}>
                <UserIcon className="w-4 h-4 mr-2" />
                {t('settings.admin.manageUsers')}
              </Button>
              <Button variant="outline" onClick={() => setLocation('/admin/settings')}>
                <SettingsIcon className="w-4 h-4 mr-2" />
                {t('settings.admin.systemSettings')}
              </Button>
            </CardContent>
          </Card>
        )
      }
    </div >
  );
}