import {notFound, redirect} from "next/navigation";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {Button} from "@/components/ui/button";
import {Select} from "@/components/ui/select";
import {Building2} from "lucide-react";
import {updateGeneralSettings} from "@/features/settings/server/actions";

type GeneralSettingsPageProps = {
  params: Promise<{tenantSlug: string; locale: string}>;
};

export default async function GeneralSettingsPage({params}: GeneralSettingsPageProps) {
  const {tenantSlug, locale} = await params;
  const session = await auth();
  if (!session?.user?.id) redirect(`/${locale}/auth/sign-in`);

  const tenant = await prisma.tenant.findUnique({where: {slug: tenantSlug}});
  if (!tenant) notFound();

  async function handleSubmit(formData: FormData) {
    "use server";
    formData.set("tenantSlug", tenantSlug);
    await updateGeneralSettings(formData);
  }

  return (
    <div className="max-w-2xl space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">General Settings</h1>
        <p className="mt-1 text-slate-500">Manage your company information</p>
      </div>

      <form action={handleSubmit}>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-5 w-5 text-blue-600" />
              Company Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label htmlFor="name">Company Name</Label>
              <Input id="name" name="name" defaultValue={tenant.name} className="mt-1" />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label htmlFor="email">Email</Label>
                <Input id="email" name="email" type="email" defaultValue={tenant.email} className="mt-1" />
              </div>
              <div>
                <Label htmlFor="phone">Phone</Label>
                <Input id="phone" name="phone" defaultValue={tenant.phone ?? ""} className="mt-1" />
              </div>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label htmlFor="city">City</Label>
                <Input id="city" name="city" defaultValue={tenant.city ?? ""} className="mt-1" />
              </div>
              <div>
                <Label htmlFor="country">Country</Label>
                <Input id="country" name="country" defaultValue={tenant.country ?? ""} className="mt-1" />
              </div>
            </div>
            <div>
              <Label htmlFor="website">Website</Label>
              <Input id="website" name="website" defaultValue={tenant.website ?? ""} className="mt-1" placeholder="https://..." />
            </div>
            <div>
              <Label htmlFor="currency">Currency</Label>
              <Select id="currency" name="currency" defaultValue={tenant.currency} className="mt-1">
                {["USD", "EUR", "SAR", "AED", "TND", "MAD", "EGP"].map((c) => (
                  <option key={c} value={c}>{c}</option>
                ))}
              </Select>
            </div>
            <Button type="submit" className="mt-2">Save Settings</Button>
          </CardContent>
        </Card>
      </form>
    </div>
  );
}