import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { Send, Eye } from 'lucide-react';
import { api } from '../../lib/api-client';
import { AppShell, PageHeader, PageBody } from '../../layout/AppShell';
import { Button, Card, CardContent, Input, Label, Select, Textarea } from '../../components/ui/primitives';

export function PushComposer() {
  const [form, setForm] = useState({
    title: '',
    body: '',
    url: 'https://sneakerpicks.nl',
    image_url: '',
    segment: 'all',
  });

  const sendMut = useMutation({
    mutationFn: () =>
      api.post<{ jobId: number }>('/push/send', {
        title: form.title,
        body: form.body,
        url: form.url,
        image_url: form.image_url || undefined,
        segment: form.segment,
      }),
    onSuccess: (res) => {
      toast.success(`Push in wachtrij (job #${res.jobId})`);
      setForm({ ...form, title: '', body: '' });
    },
    onError: (e: Error) => toast.error(e.message),
  });

  return (
    <AppShell>
      <PageHeader title="Push notificatie" description="Stuur naar alle abonnees of een segment." />
      <PageBody>
        <div className="grid grid-cols-12 gap-6 max-w-5xl">
          <div className="col-span-7">
            <Card>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <Label>Titel</Label>
                    <Input
                      className="mt-1"
                      maxLength={60}
                      value={form.title}
                      onChange={(e) => setForm({ ...form, title: e.target.value })}
                      placeholder="€50 korting op Nike Air Max"
                    />
                    <p className="text-xs text-[#666] mt-1">{form.title.length}/60</p>
                  </div>
                  <div>
                    <Label>Bericht</Label>
                    <Textarea
                      className="mt-1"
                      rows={3}
                      maxLength={150}
                      value={form.body}
                      onChange={(e) => setForm({ ...form, body: e.target.value })}
                      placeholder="Bekijk de deal voordat hij verdwijnt..."
                    />
                    <p className="text-xs text-[#666] mt-1">{form.body.length}/150</p>
                  </div>
                  <div>
                    <Label>Doel-URL</Label>
                    <Input className="mt-1" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} />
                  </div>
                  <div>
                    <Label>Afbeelding URL (optioneel)</Label>
                    <Input className="mt-1" value={form.image_url} onChange={(e) => setForm({ ...form, image_url: e.target.value })} />
                  </div>
                  <div>
                    <Label>Segment</Label>
                    <Select className="mt-1" value={form.segment} onChange={(e) => setForm({ ...form, segment: e.target.value })}>
                      <option value="all">Alle abonnees</option>
                      <option value="engaged">Engaged (laatste 30 dagen)</option>
                      <option value="dormant">Dormant (30+ dagen inactief)</option>
                    </Select>
                  </div>
                </div>
                <div className="mt-6 pt-4 border-t border-[#333]">
                  <Button
                    onClick={() => {
                      if (confirm(`Push verzenden naar "${form.segment}"?`)) sendMut.mutate();
                    }}
                    disabled={!form.title || !form.body || sendMut.isPending}
                  >
                    <Send className="h-4 w-4" />
                    Verstuur push
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="col-span-5">
            <Card>
              <div className="px-4 py-3 border-b border-[#333] flex items-center gap-2">
                <Eye className="h-4 w-4 text-[#999]" />
                <span className="text-sm font-medium text-[#F5F5F5]">Preview</span>
              </div>
              <CardContent>
                <div className="border border-[#333] rounded-xl bg-[#0A0A0A] p-4 flex gap-3">
                  <div className="w-10 h-10 rounded bg-[#00FF6A]/20 flex items-center justify-center flex-shrink-0">
                    <span className="text-xs font-bold text-[#00FF6A]">SP</span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-xs font-medium text-[#F5F5F5] truncate">
                        {form.title || 'Titel...'}
                      </p>
                      <span className="text-[10px] text-[#666]">nu</span>
                    </div>
                    <p className="text-xs text-[#999] mt-1 line-clamp-3">
                      {form.body || 'Bericht...'}
                    </p>
                    {form.image_url && (
                      <img src={form.image_url} alt="" className="mt-2 rounded w-full max-h-32 object-cover" />
                    )}
                    <p className="text-[10px] text-[#666] mt-1">sneakerpicks.nl</p>
                  </div>
                </div>
                <p className="text-xs text-[#666] mt-3">
                  Let op: iOS en Android tonen verschillend. Houd titel onder 50 chars voor veilige weergave.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </PageBody>
    </AppShell>
  );
}