"use client";

import { useState } from "react";
import * as React from "react";
import { useSession } from "next-auth/react";
import {
  Download,
  Upload,
  User,
  Database,
  AlertTriangle,
  Shield,
} from "lucide-react";

import { api } from "~/trpc/react";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

import { toast } from "sonner";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import { Textarea } from "~/components/ui/textarea";

export default function SettingsPage() {
  const { data: session } = useSession();
  const [name, setName] = useState("");
  const [deleteConfirmText, setDeleteConfirmText] = useState("");
  const [importData, setImportData] = useState("");
  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);

  // Queries
  const { data: profile, refetch: refetchProfile } =
    api.settings.getProfile.useQuery();
  const { data: dataStats } = api.settings.getDataStats.useQuery();

  // Mutations
  const updateProfileMutation = api.settings.updateProfile.useMutation({
    onSuccess: () => {
      toast.success("Your profile has been successfully updated.");
      void refetchProfile();
    },
    onError: (error: { message: string }) => {
      toast.error(`Error updating profile: ${error.message}`);
    },
  });

  const exportDataQuery = api.settings.exportData.useQuery(undefined, {
    enabled: false,
  });

  // Handle export data success/error
  React.useEffect(() => {
    if (exportDataQuery.data && !exportDataQuery.isFetching) {
      // Create and download the backup file
      const blob = new Blob([JSON.stringify(exportDataQuery.data, null, 2)], {
        type: "application/json",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `beenvoice-backup-${new Date().toISOString().split("T")[0]}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);

      toast.success("Your data backup has been downloaded.");
    }

    if (exportDataQuery.error) {
      toast.error(`Error exporting data: ${exportDataQuery.error.message}`);
    }
  }, [exportDataQuery.data, exportDataQuery.isFetching, exportDataQuery.error]);

  const importDataMutation = api.settings.importData.useMutation({
    onSuccess: (result) => {
      toast.success(
        `Data imported successfully! Imported ${result.imported.clients} clients, ${result.imported.businesses} businesses, and ${result.imported.invoices} invoices.`,
      );
      setImportData("");
      setIsImportDialogOpen(false);
      void refetchProfile();
    },
    onError: (error: { message: string }) => {
      toast.error(`Error importing data: ${error.message}`);
    },
  });

  const deleteDataMutation = api.settings.deleteAllData.useMutation({
    onSuccess: () => {
      toast.success("Your account data has been permanently deleted.");
      setDeleteConfirmText("");
    },
    onError: (error: { message: string }) => {
      toast.error(`Error deleting data: ${error.message}`);
    },
  });

  const handleUpdateProfile = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      toast.error("Please enter your name.");
      return;
    }
    updateProfileMutation.mutate({ name: name.trim() });
  };

  const handleExportData = () => {
    void exportDataQuery.refetch();
  };

  // Type guard for backup data
  const isValidBackupData = (
    data: unknown,
  ): data is {
    exportDate: string;
    version: string;
    user: { name?: string; email: string };
    clients: Array<{
      name: string;
      email?: string;
      phone?: string;
      addressLine1?: string;
      addressLine2?: string;
      city?: string;
      state?: string;
      postalCode?: string;
      country?: string;
    }>;
    businesses: Array<{
      name: string;
      email?: string;
      phone?: string;
      addressLine1?: string;
      addressLine2?: string;
      city?: string;
      state?: string;
      postalCode?: string;
      country?: string;
      website?: string;
      taxId?: string;
      logoUrl?: string;
      isDefault?: boolean;
    }>;
    invoices: Array<{
      invoiceNumber: string;
      businessName?: string;
      clientName: string;
      issueDate: Date;
      dueDate: Date;
      status?: string;
      totalAmount?: number;
      taxRate?: number;
      notes?: string;
      items: Array<{
        date: Date;
        description: string;
        hours: number;
        rate: number;
        amount: number;
        position?: number;
      }>;
    }>;
  } => {
    return !!(
      data &&
      typeof data === "object" &&
      data !== null &&
      "exportDate" in data &&
      "version" in data &&
      "user" in data &&
      "clients" in data &&
      "businesses" in data &&
      "invoices" in data
    );
  };

  const handleImportData = () => {
    try {
      const parsedData: unknown = JSON.parse(importData);

      if (isValidBackupData(parsedData)) {
        importDataMutation.mutate(parsedData);
      } else {
        toast.error("Invalid backup file format.");
      }
    } catch {
      toast.error("Invalid JSON. Please check your backup file format.");
    }
  };

  const handleDeleteAllData = () => {
    if (deleteConfirmText !== "DELETE ALL DATA") {
      toast.error("Please type 'DELETE ALL DATA' to confirm.");
      return;
    }
    deleteDataMutation.mutate({ confirmText: deleteConfirmText });
  };

  // Set initial name value when profile loads
  if (profile && !name && profile.name) {
    setName(profile.name);
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-4xl font-bold text-transparent">
          Settings
        </h1>
        <p className="mt-2 text-lg text-gray-600">
          Manage your account and data preferences
        </p>
      </div>

      <div className="grid gap-8 lg:grid-cols-2">
        {/* Profile Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              Profile
            </CardTitle>
            <CardDescription>Update your personal information</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <form onSubmit={handleUpdateProfile} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="name">Name</Label>
                <Input
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Your full name"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  value={session?.user?.email ?? ""}
                  disabled
                  className="bg-gray-50"
                />
                <p className="text-sm text-gray-500">Email cannot be changed</p>
              </div>
              <Button
                type="submit"
                disabled={updateProfileMutation.isPending}
                className="bg-emerald-600 hover:bg-emerald-700"
              >
                {updateProfileMutation.isPending
                  ? "Updating..."
                  : "Update Profile"}
              </Button>
            </form>
          </CardContent>
        </Card>

        {/* Data Statistics */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              Your Data
            </CardTitle>
            <CardDescription>Overview of your account data</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-3 gap-4 text-center">
              <div>
                <div className="text-2xl font-bold text-emerald-600">
                  {dataStats?.clients ?? 0}
                </div>
                <div className="text-sm text-gray-500">Clients</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-emerald-600">
                  {dataStats?.businesses ?? 0}
                </div>
                <div className="text-sm text-gray-500">Businesses</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-emerald-600">
                  {dataStats?.invoices ?? 0}
                </div>
                <div className="text-sm text-gray-500">Invoices</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Backup & Restore Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Shield className="h-5 w-5" />
            Backup & Restore
          </CardTitle>
          <CardDescription>
            Export your data for backup or import from a previous backup
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 md:grid-cols-2">
            {/* Export Data */}
            <div className="space-y-3">
              <h3 className="font-semibold">Export Data</h3>
              <p className="text-sm text-gray-600">
                Download all your clients, businesses, and invoices as a JSON
                backup file.
              </p>
              <Button
                onClick={handleExportData}
                disabled={exportDataQuery.isFetching}
                variant="outline"
                className="w-full"
              >
                <Download className="mr-2 h-4 w-4" />
                {exportDataQuery.isFetching ? "Exporting..." : "Export Data"}
              </Button>
            </div>

            {/* Import Data */}
            <div className="space-y-3">
              <h3 className="font-semibold">Import Data</h3>
              <p className="text-sm text-gray-600">
                Restore your data from a previous backup file.
              </p>
              <Dialog
                open={isImportDialogOpen}
                onOpenChange={setIsImportDialogOpen}
              >
                <DialogTrigger asChild>
                  <Button variant="outline" className="w-full">
                    <Upload className="mr-2 h-4 w-4" />
                    Import Data
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-2xl">
                  <DialogHeader>
                    <DialogTitle>Import Backup Data</DialogTitle>
                    <DialogDescription>
                      Paste the contents of your backup JSON file below. This
                      will add the data to your existing account.
                    </DialogDescription>
                  </DialogHeader>
                  <div className="space-y-4">
                    <Textarea
                      placeholder="Paste your backup JSON data here..."
                      value={importData}
                      onChange={(e) => setImportData(e.target.value)}
                      rows={10}
                      className="font-mono text-sm"
                    />
                  </div>
                  <DialogFooter>
                    <Button
                      variant="outline"
                      onClick={() => setIsImportDialogOpen(false)}
                    >
                      Cancel
                    </Button>
                    <Button
                      onClick={handleImportData}
                      disabled={
                        !importData.trim() || importDataMutation.isPending
                      }
                      className="bg-emerald-600 hover:bg-emerald-700"
                    >
                      {importDataMutation.isPending
                        ? "Importing..."
                        : "Import Data"}
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>

          <div className="rounded-lg bg-blue-50 p-4">
            <h4 className="font-medium text-blue-900">Backup Tips</h4>
            <ul className="mt-2 space-y-1 text-sm text-blue-800">
              <li>• Regular backups help protect your data</li>
              <li>
                • Backup files contain all your business data in JSON format
              </li>
              <li>
                • Import will add data to your existing account (not replace)
              </li>
              <li>• Keep your backup files in a secure location</li>
            </ul>
          </div>
        </CardContent>
      </Card>

      {/* Danger Zone */}
      <Card className="border-red-200">
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-red-600">
            <AlertTriangle className="h-5 w-5" />
            Danger Zone
          </CardTitle>
          <CardDescription>
            Irreversible actions for your account data
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="rounded-lg bg-red-50 p-4">
              <h4 className="font-medium text-red-900">Delete All Data</h4>
              <p className="mt-1 text-sm text-red-800">
                This will permanently delete all your clients, businesses,
                invoices, and related data. This action cannot be undone.
              </p>
            </div>

            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="destructive">Delete All Data</Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                  <AlertDialogDescription className="space-y-2">
                    <p>
                      This action cannot be undone. This will permanently delete
                      all your:
                    </p>
                    <ul className="list-inside list-disc space-y-1 text-sm">
                      <li>Clients and their information</li>
                      <li>Business profiles</li>
                      <li>Invoices and invoice items</li>
                      <li>All related data</li>
                    </ul>
                    <p className="font-medium">
                      Type{" "}
                      <span className="rounded bg-gray-100 px-1 font-mono">
                        DELETE ALL DATA
                      </span>{" "}
                      to confirm:
                    </p>
                    <Input
                      value={deleteConfirmText}
                      onChange={(e) => setDeleteConfirmText(e.target.value)}
                      placeholder="Type: DELETE ALL DATA"
                      className="font-mono"
                    />
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel onClick={() => setDeleteConfirmText("")}>
                    Cancel
                  </AlertDialogCancel>
                  <AlertDialogAction
                    onClick={handleDeleteAllData}
                    disabled={
                      deleteConfirmText !== "DELETE ALL DATA" ||
                      deleteDataMutation.isPending
                    }
                    className="bg-red-600 hover:bg-red-700"
                  >
                    {deleteDataMutation.isPending
                      ? "Deleting..."
                      : "Delete All Data"}
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}