import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { toast } from "sonner";
import { Settings as SettingsIcon, Sun, Moon, Globe, Lock, User, Image as ImageIcon, Upload, Trash2, Type } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useTheme } from "@/hooks/use-theme";
import { useI18n } from "@/hooks/use-i18n";
import { useRoles } from "@/hooks/use-roles";
import { useAppLogo } from "@/hooks/use-app-logo";
import { useAppName } from "@/hooks/use-app-name";

export const Route = createFileRoute("/_authenticated/settings")({
  component: SettingsPage,
});

function SettingsPage() {
  const { theme, toggle: toggleTheme } = useTheme();
  const { lang, toggle: toggleLang } = useI18n();
  const { roles } = useRoles();
  const { logo, setFromDataUrl, clear: clearLogo } = useAppLogo();
  const { name: appName, save: saveAppName, defaultName } = useAppName();
  const [appNameInput, setAppNameInput] = useState(appName);
  useEffect(() => { setAppNameInput(appName); }, [appName]);

  const [email, setEmail] = useState("");
  const [userId, setUserId] = useState("");
  const [fullName, setFullName] = useState("");
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(true);
  const [savingProfile, setSavingProfile] = useState(false);

  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [savingPassword, setSavingPassword] = useState(false);

  const onLogoFile = (file: File) => {
    if (!file.type.startsWith("image/")) return toast.error("Please choose an image file");
    if (file.size > 1024 * 1024) return toast.error("Logo must be under 1MB");
    const reader = new FileReader();
    reader.onload = () => {
      setFromDataUrl(String(reader.result));
      toast.success("Logo updated");
    };
    reader.onerror = () => toast.error("Could not read file");
    reader.readAsDataURL(file);
  };

  useEffect(() => {
    (async () => {
      const { data } = await supabase.auth.getUser();
      if (!data.user) return;
      setUserId(data.user.id);
      setEmail(data.user.email ?? "");
      const { data: p } = await supabase
        .from("profiles")
        .select("full_name, phone")
        .eq("id", data.user.id)
        .maybeSingle();
      if (p) {
        setFullName(p.full_name ?? "");
        setPhone(p.phone ?? "");
      }
      setLoading(false);
    })();
  }, []);

  const saveProfile = async () => {
    if (!userId) return;
    setSavingProfile(true);
    const { error } = await supabase
      .from("profiles")
      .upsert({ id: userId, full_name: fullName, phone });
    setSavingProfile(false);
    if (error) toast.error(error.message);
    else toast.success("Profile updated");
  };

  const changePassword = async () => {
    if (newPassword.length < 6) return toast.error("Password must be at least 6 characters");
    if (newPassword !== confirmPassword) return toast.error("Passwords do not match");
    setSavingPassword(true);
    const { error } = await supabase.auth.updateUser({ password: newPassword });
    setSavingPassword(false);
    if (error) toast.error(error.message);
    else {
      toast.success("Password updated");
      setNewPassword("");
      setConfirmPassword("");
    }
  };

  return (
    <div className="space-y-6 max-w-3xl mx-auto">
      <div className="flex items-center gap-3">
        <SettingsIcon className="h-7 w-7 text-primary" />
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
          <p className="text-sm text-muted-foreground">Manage your account and preferences.</p>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base"><User className="h-4 w-4" /> Profile</CardTitle>
          <CardDescription>Your account information.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1.5">
            <Label>Email</Label>
            <Input value={email} disabled />
          </div>
          <div className="space-y-1.5">
            <Label>Full name</Label>
            <Input value={fullName} onChange={(e) => setFullName(e.target.value)} disabled={loading} />
          </div>
          <div className="space-y-1.5">
            <Label>Phone</Label>
            <Input value={phone} onChange={(e) => setPhone(e.target.value)} disabled={loading} />
          </div>
          <div className="flex flex-wrap gap-1.5 pt-1">
            {roles.length === 0 ? (
              <span className="text-xs text-muted-foreground">No roles assigned</span>
            ) : (
              roles.map((r) => <Badge key={r} variant="secondary">{r}</Badge>)
            )}
          </div>
          <Button onClick={saveProfile} disabled={savingProfile || loading}>
            {savingProfile ? "Saving…" : "Save profile"}
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base"><Type className="h-4 w-4" /> App name</CardTitle>
          <CardDescription>Shown in the header (stored on this device).</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1.5">
            <Label>Name</Label>
            <Input
              value={appNameInput}
              onChange={(e) => setAppNameInput(e.target.value)}
              maxLength={40}
              placeholder={defaultName}
            />
          </div>
          <div className="flex gap-2">
            <Button
              onClick={() => { saveAppName(appNameInput); toast.success("App name updated"); }}
              disabled={appNameInput.trim() === appName}
            >
              Save name
            </Button>
            {appName !== defaultName && (
              <Button variant="outline" onClick={() => { saveAppName(""); toast.success("Reset to default"); }}>
                Reset
              </Button>
            )}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base"><ImageIcon className="h-4 w-4" /> App logo</CardTitle>
          <CardDescription>Replace the header logo (stored on this device).</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex items-center gap-4">
            <div className="h-16 w-16 rounded-xl border bg-muted grid place-items-center overflow-hidden">
              {logo ? (
                <img src={logo} alt="Current logo" className="h-full w-full object-cover" />
              ) : (
                <ImageIcon className="h-6 w-6 text-muted-foreground" />
              )}
            </div>
            <div className="flex flex-wrap gap-2">
              <Label htmlFor="logo-upload" className="cursor-pointer">
                <div className="inline-flex items-center gap-2 h-9 px-3 rounded-md border bg-background hover:bg-accent text-sm">
                  <Upload className="h-4 w-4" /> Upload logo
                </div>
                <input
                  id="logo-upload"
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={(e) => {
                    const f = e.target.files?.[0];
                    if (f) onLogoFile(f);
                    e.target.value = "";
                  }}
                />
              </Label>
              {logo && (
                <Button variant="outline" onClick={clearLogo}>
                  <Trash2 className="h-4 w-4 mr-2" /> Remove
                </Button>
              )}
            </div>
          </div>
          <p className="text-xs text-muted-foreground">PNG/JPG/SVG, under 1MB. Square images look best.</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base"><Globe className="h-4 w-4" /> Preferences</CardTitle>
          <CardDescription>Theme and language.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex items-center justify-between gap-3">
            <div>
              <div className="font-medium text-sm">Theme</div>
              <div className="text-xs text-muted-foreground">Currently {theme}</div>
            </div>
            <Button variant="outline" onClick={toggleTheme}>
              {theme === "dark" ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
              Switch to {theme === "dark" ? "light" : "dark"}
            </Button>
          </div>
          <div className="flex items-center justify-between gap-3">
            <div>
              <div className="font-medium text-sm">Language</div>
              <div className="text-xs text-muted-foreground">Currently {lang === "bn" ? "বাংলা" : "English"}</div>
            </div>
            <Button variant="outline" onClick={toggleLang}>
              {lang === "en" ? "বাংলা" : "English"}
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base"><Lock className="h-4 w-4" /> Change password</CardTitle>
          <CardDescription>Use at least 6 characters.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="space-y-1.5">
            <Label>New password</Label>
            <Input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
          </div>
          <div className="space-y-1.5">
            <Label>Confirm password</Label>
            <Input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
          </div>
          <Button onClick={changePassword} disabled={savingPassword || !newPassword}>
            {savingPassword ? "Updating…" : "Update password"}
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}