"use client";

import { FormEvent, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { getBusiness, saveBusiness } from "@/lib/data-store";
import type { Business, Competitor } from "@/lib/types";

export default function CompetitorsPage() {
  const [business, setBusiness] = useState<Business | null>(null);
  const [name, setName] = useState("");
  const [website, setWebsite] = useState("");
  const [positioning, setPositioning] = useState("");
  const [pricingNotes, setPricingNotes] = useState("");
  const [strengths, setStrengths] = useState("");
  const [weaknesses, setWeaknesses] = useState("");
  const [complaints, setComplaints] = useState("");
  const [beatOpportunity, setBeatOpportunity] = useState("");

  useEffect(() => {
    getBusiness().then(setBusiness);
  }, []);

  const addCompetitor = async (e: FormEvent) => {
    e.preventDefault();
    if (!business || !name) return;

    const competitor: Competitor = {
      id: crypto.randomUUID(),
      name,
      website,
      positioning,
      pricingNotes,
      strengths: strengths.split(",").map((s) => s.trim()).filter(Boolean),
      weaknesses: weaknesses.split(",").map((w) => w.trim()).filter(Boolean),
      customerComplaints: complaints.split(",").map((c) => c.trim()).filter(Boolean),
      beatOpportunity: beatOpportunity || "Improve speed, clarity, and proof to win their dissatisfied buyers.",
    };

    const next = {
      ...business,
      competitors: [competitor, ...business.competitors],
      updatedAt: new Date().toISOString(),
    };
    setBusiness(next);
    await saveBusiness(next);
    setName("");
    setWebsite("");
    setPositioning("");
    setPricingNotes("");
    setStrengths("");
    setWeaknesses("");
    setComplaints("");
    setBeatOpportunity("");
  };

  return (
    <div className="space-y-4 py-4">
      <Card>
        <CardHeader>
          <CardTitle>Add competitor manually</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={addCompetitor} className="grid gap-3">
            <Input placeholder="Competitor name" value={name} onChange={(e) => setName(e.target.value)} required />
            <Input placeholder="Website" value={website} onChange={(e) => setWebsite(e.target.value)} />
            <Input placeholder="Positioning" value={positioning} onChange={(e) => setPositioning(e.target.value)} />
            <Input placeholder="Pricing notes" value={pricingNotes} onChange={(e) => setPricingNotes(e.target.value)} />
            <Textarea placeholder="Strengths (comma-separated)" value={strengths} onChange={(e) => setStrengths(e.target.value)} />
            <Textarea placeholder="Weaknesses (comma-separated)" value={weaknesses} onChange={(e) => setWeaknesses(e.target.value)} />
            <Textarea placeholder="Customer complaints (comma-separated)" value={complaints} onChange={(e) => setComplaints(e.target.value)} />
            <Textarea placeholder="How can you beat them?" value={beatOpportunity} onChange={(e) => setBeatOpportunity(e.target.value)} />
            <Button type="submit" className="w-fit">Add competitor</Button>
          </form>
        </CardContent>
      </Card>

      <div className="space-y-3">
        {business?.competitors.map((c) => (
          <Card key={c.id}>
            <CardContent className="space-y-2 p-5 text-sm">
              <p className="text-lg font-semibold">{c.name}</p>
              {c.website && <p className="text-slate-400">{c.website}</p>}
              {c.positioning && <p><span className="text-slate-500">Positioning:</span> {c.positioning}</p>}
              {c.pricingNotes && <p><span className="text-slate-500">Pricing:</span> {c.pricingNotes}</p>}
              <p><span className="text-slate-500">Strengths:</span> {c.strengths.join(", ") || "—"}</p>
              <p><span className="text-slate-500">Weaknesses:</span> {c.weaknesses.join(", ") || "—"}</p>
              <p><span className="text-slate-500">Complaints:</span> {c.customerComplaints.join(", ") || "—"}</p>
              <p className="text-amber-200">Beat them by: {c.beatOpportunity}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}