"use client";

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 { Separator } from "@/components/ui/separator";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Building2, Palette, Bell, Lock, CreditCard, Users } from "lucide-react";
import { useToast } from "@/hooks/use-toast";

export default function SettingsPage() {
  const { toast } = useToast();

  const handleSaveChanges = (section: string) => {
    toast({
      title: "Settings Saved",
      description: `${section} settings have been updated. (Simulated)`,
    });
  };
  
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight text-foreground">Settings</h1>
        <p className="text-muted-foreground">Manage your store preferences and configurations.</p>
      </div>

      <Tabs defaultValue="general" className="space-y-4">
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
          <TabsTrigger value="general"><Building2 className="mr-2 h-4 w-4" />General</TabsTrigger>
          <TabsTrigger value="appearance"><Palette className="mr-2 h-4 w-4" />Appearance</TabsTrigger>
          <TabsTrigger value="notifications"><Bell className="mr-2 h-4 w-4" />Notifications</TabsTrigger>
          <TabsTrigger value="security"><Lock className="mr-2 h-4 w-4" />Security</TabsTrigger>
          <TabsTrigger value="billing"><CreditCard className="mr-2 h-4 w-4" />Billing</TabsTrigger>
          <TabsTrigger value="integrations"><Users className="mr-2 h-4 w-4" />Integrations</TabsTrigger>
        </TabsList>

        <TabsContent value="general">
          <Card className="shadow-lg">
            <CardHeader>
              <CardTitle>General Settings</CardTitle>
              <CardDescription>Basic store information and operational settings.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="storeName">Store Name</Label>
                <Input id="storeName" defaultValue="Simple Sales Store" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="storeEmail">Store Email</Label>
                <Input id="storeEmail" type="email" defaultValue="contact@simplesales.com" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="storeCurrency">Currency</Label>
                <Input id="storeCurrency" defaultValue="USD" />
              </div>
              <Button onClick={() => handleSaveChanges("General")}>Save Changes</Button>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="appearance">
          <Card className="shadow-lg">
            <CardHeader>
              <CardTitle>Appearance</CardTitle>
              <CardDescription>Customize the look and feel of your POS.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between rounded-lg border p-4">
                <Label htmlFor="darkMode" className="flex flex-col space-y-1">
                  <span>Dark Mode</span>
                  <span className="font-normal leading-snug text-muted-foreground">
                    Enable dark theme for the application.
                  </span>
                </Label>
                <Switch id="darkMode" aria-label="Toggle dark mode" />
              </div>
               <div className="space-y-2">
                <Label htmlFor="logoUpload">Store Logo</Label>
                <Input id="logoUpload" type="file" />
                <p className="text-sm text-muted-foreground">Upload a PNG or JPG, max 2MB.</p>
              </div>
              <Button onClick={() => handleSaveChanges("Appearance")}>Save Changes</Button>
            </CardContent>
          </Card>
        </TabsContent>
        
        <TabsContent value="notifications">
           <Card className="shadow-lg">
            <CardHeader>
              <CardTitle>Notifications</CardTitle>
              <CardDescription>Manage how you receive notifications.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
               <div className="flex items-center justify-between rounded-lg border p-4">
                <Label htmlFor="lowStockAlerts" className="flex flex-col space-y-1">
                  <span>Low Stock Alerts</span>
                  <span className="font-normal leading-snug text-muted-foreground">
                    Receive notifications for products running low on stock.
                  </span>
                </Label>
                <Switch id="lowStockAlerts" defaultChecked aria-label="Toggle low stock alerts" />
              </div>
              <div className="flex items-center justify-between rounded-lg border p-4">
                <Label htmlFor="dailySalesSummary" className="flex flex-col space-y-1">
                  <span>Daily Sales Summary</span>
                  <span className="font-normal leading-snug text-muted-foreground">
                    Get an email summary of daily sales activity.
                  </span>
                </Label>
                <Switch id="dailySalesSummary" aria-label="Toggle daily sales summary" />
              </div>
              <Button onClick={() => handleSaveChanges("Notifications")}>Save Changes</Button>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Placeholder for other tabs */}
        <TabsContent value="security">
          <Card className="shadow-lg"><CardHeader><CardTitle>Security Settings</CardTitle><CardDescription>Manage security options.</CardDescription></CardHeader><CardContent><p className="text-muted-foreground">Security settings will be available here.</p></CardContent></Card>
        </TabsContent>
        <TabsContent value="billing">
          <Card className="shadow-lg"><CardHeader><CardTitle>Billing Information</CardTitle><CardDescription>Manage your subscription and payment methods.</CardDescription></CardHeader><CardContent><p className="text-muted-foreground">Billing details will be available here.</p></CardContent></Card>
        </TabsContent>
        <TabsContent value="integrations">
          <Card className="shadow-lg"><CardHeader><CardTitle>Integrations</CardTitle><CardDescription>Connect with other services.</CardDescription></CardHeader><CardContent><p className="text-muted-foreground">Integration options will be available here.</p></CardContent></Card>
        </TabsContent>

      </Tabs>
    </div>
  );
}