"use client";

import { useActionState, useEffect } from "react";
import { Buildings, CircleNotch, FloppyDisk } from '@/lib/icons';
import { toast } from "sonner";

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 { Textarea } from "@/components/ui/textarea";
import { updateWorkspaceSettingsAction } from "@/lib/appwrite/workspace-actions";
import { initialWorkspaceSettingsState } from "@/lib/appwrite/workspace-types";

type Defaults = {
  officeName: string;
  phone: string;
  email: string;
  address: string;
  defaultCurrency: string;
};

export function WorkspaceSettingsForm({
  canEdit,
  defaults,
}: {
  canEdit: boolean;
  defaults: Defaults;
}) {
  const [state, formAction, isPending] = useActionState(
    updateWorkspaceSettingsAction,
    initialWorkspaceSettingsState,
  );

  useEffect(() => {
    if (state.ok) toast.success("Bilgiler güncellendi.");
    else if (state.error) toast.error(state.error);
  }, [state]);

  return (
    <form action={formAction} className="space-y-6">
      <fieldset disabled={!canEdit || isPending} className="space-y-6 disabled:opacity-90">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Buildings className="size-4" />
              Ofis Bilgileri
            </CardTitle>
            <CardDescription>Müşterilere ve sunumlarda gösterilecek ofis bilgileri.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-5 md:grid-cols-2">
            <div className="md:col-span-2 grid gap-2">
              <Label htmlFor="officeName">Ofis adı *</Label>
              <Input
                id="officeName"
                name="officeName"
                defaultValue={defaults.officeName}
                required
                placeholder="Örn. Kovak Emlak"
              />
              {state.fieldErrors?.officeName && (
                <p className="text-destructive text-xs">{state.fieldErrors.officeName}</p>
              )}
            </div>

            <div className="grid gap-2">
              <Label htmlFor="phone">Telefon</Label>
              <Input
                id="phone"
                name="phone"
                type="tel"
                defaultValue={defaults.phone}
                placeholder="+90 555 123 45 67"
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                defaultValue={defaults.email}
                placeholder="info@ofis.com"
              />
            </div>

            <div className="grid gap-2">
              <Label htmlFor="defaultCurrency">Varsayılan para birimi</Label>
              <select
                id="defaultCurrency"
                name="defaultCurrency"
                defaultValue={defaults.defaultCurrency}
                className="border-input bg-background h-9 rounded-md border px-3 text-sm"
              >
                <option value="TRY">TRY — Türk Lirası</option>
                <option value="USD">USD — Amerikan Doları</option>
                <option value="EUR">EUR — Euro</option>
              </select>
            </div>

            <div className="grid gap-2">
              <Label htmlFor="address">Adres</Label>
              <Textarea
                id="address"
                name="address"
                rows={2}
                defaultValue={defaults.address}
                placeholder="İl, ilçe, açık adres"
              />
            </div>
          </CardContent>
        </Card>

        {canEdit && (
          <div className="flex justify-end">
            <Button type="submit" disabled={isPending}>
              {isPending ? (
                <>
                  <CircleNotch className="size-4 animate-spin" />
                  Kaydediliyor...
                </>
              ) : (
                <>
                  <FloppyDisk className="size-4" />
                  Kaydet
                </>
              )}
            </Button>
          </div>
        )}
      </fieldset>
    </form>
  );
}
