"use client";
import { useActionState } from "react";
import { subscribe, sendMessage, uploadPrescription, bookConsultation, addReview, register, login, forgotPassword, updateProfile, type FormState } from "@/app/actions";

function Status({ s }: { s: FormState }) {
  if (!s) return null;
  return <p className={`text-sm mt-3 px-3 py-2 rounded-lg ${s.error ? "bg-red-50 text-red-700" : "bg-mint text-brand-dark"}`}>{s.error || s.message}</p>;
}
const F = ({ label, children }: { label: string; children: React.ReactNode }) => <label className="block"><span className="label">{label}</span>{children}</label>;

export function NewsletterForm() {
  const [s, a, p] = useActionState(subscribe, null);
  return <form action={a} className="w-full md:w-auto"><div className="flex gap-2"><input name="email" type="email" required placeholder="Your email" className="input md:w-72" /><button disabled={p} className="btn btn-green">Subscribe</button></div><Status s={s} /></form>;
}

export function ContactForm() {
  const [s, a, p] = useActionState(sendMessage, null);
  return (
    <form action={a} className="space-y-4">
      <div className="grid sm:grid-cols-2 gap-4"><F label="Full name *"><input name="name" required className="input" /></F><F label="Phone"><input name="phone" className="input" /></F></div>
      <F label="Email *"><input name="email" type="email" required className="input" /></F>
      <F label="Message *"><textarea name="message" rows={5} required className="input" /></F>
      <button disabled={p} className="btn btn-green">{p ? "Sending…" : "Send Message"}</button><Status s={s} />
    </form>
  );
}

export function PrescriptionForm({ name = "", email = "", phone = "" }) {
  const [s, a, p] = useActionState(uploadPrescription, null);
  if (s?.ok) return <Status s={s} />;
  return (
    <form action={a} className="space-y-4">
      <div className="grid sm:grid-cols-2 gap-4"><F label="Full name *"><input name="name" defaultValue={name} required className="input" /></F><F label="Phone *"><input name="phone" defaultValue={phone} required className="input" /></F></div>
      <F label="Email"><input name="email" type="email" defaultValue={email} className="input" /></F>
      <F label="Prescription file (JPG, PNG, PDF – max 5MB) *"><input name="file" type="file" accept="image/*,application/pdf" required className="input" /></F>
      <F label="Notes for the pharmacist"><textarea name="notes" rows={3} className="input" /></F>
      <p className="text-xs text-slate-500">Your document is stored securely and only accessible to authorised pharmacy staff.</p>
      <button disabled={p} className="btn btn-green">{p ? "Uploading…" : "Submit Prescription"}</button><Status s={s} />
    </form>
  );
}

export function ConsultationForm({ types, times }: { types: string[]; times: string[] }) {
  const [s, a, p] = useActionState(bookConsultation, null);
  if (s?.ok) return <Status s={s} />;
  return (
    <form action={a} className="space-y-4">
      <div className="grid sm:grid-cols-2 gap-4"><F label="Full name *"><input name="name" required className="input" /></F><F label="Phone *"><input name="phone" required className="input" /></F></div>
      <F label="Email"><input name="email" type="email" className="input" /></F>
      <F label="Consultation type *"><select name="type" required className="input">{types.map((t) => <option key={t}>{t}</option>)}</select></F>
      <div className="grid sm:grid-cols-2 gap-4"><F label="Preferred date *"><input name="date" type="date" required className="input" min={new Date().toISOString().slice(0, 10)} /></F><F label="Preferred time *"><select name="time" required className="input">{times.map((t) => <option key={t}>{t}</option>)}</select></F></div>
      <F label="Briefly describe your concern"><textarea name="notes" rows={3} className="input" /></F>
      <button disabled={p} className="btn btn-green">{p ? "Submitting…" : "Request Consultation"}</button><Status s={s} />
    </form>
  );
}

export function ReviewForm({ productId }: { productId: number }) {
  const [s, a, p] = useActionState(addReview, null);
  return (
    <form action={a} className="space-y-3 card p-5">
      <h4 className="font-bold">Write a review</h4>
      <input type="hidden" name="productId" value={productId} />
      <div className="grid sm:grid-cols-2 gap-3"><input name="name" placeholder="Your name" required className="input" /><select name="rating" className="input">{[5, 4, 3, 2, 1].map((r) => <option key={r} value={r}>{"★".repeat(r)}</option>)}</select></div>
      <textarea name="comment" rows={3} placeholder="Your experience" className="input" />
      <button disabled={p} className="btn btn-outline">Submit Review</button><Status s={s} />
    </form>
  );
}

export function RegisterForm() {
  const [s, a, p] = useActionState(register, null);
  return (
    <form action={a} className="space-y-4">
      <F label="Full name"><input name="name" required className="input" /></F>
      <F label="Email"><input name="email" type="email" required className="input" /></F>
      <F label="Phone"><input name="phone" className="input" /></F>
      <F label="Password (min 8 characters)"><input name="password" type="password" minLength={8} required className="input" /></F>
      <label className="flex gap-2 text-sm"><input type="checkbox" name="newsletter" /> Send me health tips & offers</label>
      <button disabled={p} className="btn btn-green w-full">Create Account</button><Status s={s} />
    </form>
  );
}
export function LoginForm() {
  const [s, a, p] = useActionState(login, null);
  return (
    <form action={a} className="space-y-4">
      <F label="Email"><input name="email" type="email" required className="input" /></F>
      <F label="Password"><input name="password" type="password" required className="input" /></F>
      <button disabled={p} className="btn btn-green w-full">Sign In</button><Status s={s} />
    </form>
  );
}
export function ForgotForm() {
  const [s, a, p] = useActionState(forgotPassword, null);
  return <form action={a} className="space-y-4"><F label="Email"><input name="email" type="email" required className="input" /></F><button disabled={p} className="btn btn-green w-full">Request Reset</button><Status s={s} /></form>;
}
export function ProfileForm({ c }: { c: { name: string; phone: string; newsletter: boolean } }) {
  const [s, a, p] = useActionState(updateProfile, null);
  return (
    <form action={a} className="space-y-4">
      <div className="grid sm:grid-cols-2 gap-4"><F label="Name"><input name="name" defaultValue={c.name} className="input" /></F><F label="Phone"><input name="phone" defaultValue={c.phone} className="input" /></F></div>
      <h4 className="font-bold pt-2">Add / update address</h4>
      <div className="grid sm:grid-cols-2 gap-4"><F label="Label"><input name="label" placeholder="Home" className="input" /></F><F label="District"><input name="district" className="input" /></F><F label="Town"><input name="town" className="input" /></F><F label="Address"><input name="address" className="input" /></F></div>
      <F label="New password (leave blank to keep)"><input name="password" type="password" className="input" /></F>
      <label className="flex gap-2 text-sm"><input type="checkbox" name="newsletter" defaultChecked={c.newsletter} /> Receive newsletter & offers</label>
      <button disabled={p} className="btn btn-green">Save Changes</button><Status s={s} />
    </form>
  );
}