import { Save } from "lucide-react";
import {
  Field,
  FormActions,
  FormShell,
  GhostLink,
  PageHeader,
  PrimaryButton,
  Textarea,
} from "@/components/admin/form";
import { MediaPicker } from "@/components/admin/media-picker";
import { saveTeamMember } from "@/lib/admin-actions";
import type { TeamMemberRow } from "@/lib/types";

export function TeamMemberForm({ row }: { row?: TeamMemberRow }) {
  return (
    <div>
      <PageHeader
        title={row ? "Üyeyi düzenle" : "Yeni ekip üyesi"}
        backHref="/admin/ekip"
      />
      <form action={saveTeamMember}>
        {row && <input type="hidden" name="id" value={row.$id} />}
        <FormShell>
          <div className="grid gap-5 md:grid-cols-2">
            <Field label="Ad Soyad" name="name" required defaultValue={row?.name} />
            <Field
              label="Pozisyon / Rol"
              name="role"
              defaultValue={row?.role}
              placeholder="Kurucu / Geliştirici / Tasarımcı"
            />
            <Field
              label="LinkedIn URL"
              name="linkedin_url"
              type="url"
              defaultValue={row?.linkedin_url}
            />
            <Field
              label="Sıra"
              name="order"
              type="number"
              defaultValue={row?.order ?? 0}
            />
          </div>

          <div className="mt-5">
            <MediaPicker
              label="Fotoğraf"
              name="photo_url"
              defaultValue={row?.photo_url}
              maxSizeMB={5}
              help="Kare format ideal. Hakkımızda sayfasında gösterilir."
            />
          </div>
          <div className="mt-5">
            <Textarea
              label="Biyografi"
              name="bio"
              rows={4}
              defaultValue={row?.bio}
              placeholder="2-3 cümle özet — uzmanlık, deneyim, ilgi alanı."
            />
          </div>
          <FormActions>
            <GhostLink href="/admin/ekip">İptal</GhostLink>
            <PrimaryButton>
              <Save className="size-4" /> Kaydet
            </PrimaryButton>
          </FormActions>
        </FormShell>
      </form>
    </div>
  );
}