import React, { useState } from 'react';
import { Button } from '../ui/button';
import { X, Repeat, MessageSquare, Link, Mail, Check } from 'lucide-react';
import { Post } from '../../types';
import { useToast } from '../../components/feedback/ToastProvider';
import { useCopyToClipboard } from '@/hooks/useCopyToClipboard';

interface SharePostModalProps {
  post: Post;
  onClose: () => void;
  onConfirm: (type: 'repost' | 'quote', text?: string) => void;
}

export const SharePostModal: React.FC<SharePostModalProps> = ({
  post,
  onClose,
  onConfirm,
}) => {
  const { addToast } = useToast();
  const [mode, setMode] = useState<'options' | 'quote'>('options');
  const [quoteText, setQuoteText] = useState('');
  const { copied, copy } = useCopyToClipboard();

  const handleCopyLink = async () => {
    const ok = await copy(`https://veza.io/post/${post.id}`);
    if (ok) {
      addToast('Link copied to clipboard', 'success');
      onClose();
    }
  };

  if (mode === 'quote') {
    return (
      <div className="fixed inset-0 z-[var(--sumi-z-modal)] flex items-center justify-center p-4">
        <div
          className="absolute inset-0 bg-background/90 backdrop-blur-sm"
          onClick={onClose}
        ></div>
        <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
          <div className="p-4 border-b border-border bg-card flex justify-between items-center">
            <h3 className="font-bold text-foreground">Quote Post</h3>
            <button onClick={onClose}>
              <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
            </button>
          </div>
          <div className="p-4">
            <textarea
              className="w-full bg-transparent border-none text-foreground placeholder:text-muted-foreground focus:ring-0 resize-none h-24 mb-4"
              placeholder="Add a comment..."
              value={quoteText}
              onChange={(e) => setQuoteText(e.target.value)}
              autoFocus
            />
            <div className="border border-border rounded-lg p-4 bg-card/30 opacity-70">
              <div className="flex items-center gap-2 mb-2">
                <img
                  src={post.author.avatar}
                  className="w-5 h-5 rounded-full"
                />
                <span className="font-bold text-xs text-foreground">
                  {post.author.name}
                </span>
              </div>
              <p className="text-xs text-muted-foreground line-clamp-2">
                {post.content}
              </p>
            </div>
          </div>
          <div className="p-4 border-t border-border bg-card flex justify-end gap-2">
            <Button variant="ghost" onClick={() => setMode('options')}>
              Back
            </Button>
            <Button
              variant="primary"
              onClick={() => {
                onConfirm('quote', quoteText);
                onClose();
              }}
            >
              Quote
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 z-[var(--sumi-z-modal)] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-sm bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-border bg-card flex justify-between items-center">
          <h3 className="font-bold text-foreground">Share Post</h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-foreground" />
          </button>
        </div>

        <div className="p-2">
          <button
            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
            onClick={() => {
              onConfirm('repost');
              onClose();
            }}
          >
            <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success group-hover:bg-success/20">
              <Repeat className="w-5 h-5" />
            </div>
            <div className="text-left">
              <div className="text-foreground font-bold">Repost</div>
              <div className="text-xs text-muted-foreground">
                Instantly share with your followers
              </div>
            </div>
          </button>

          <button
            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
            onClick={() => setMode('quote')}
          >
            <div className="w-10 h-10 rounded-full bg-muted/10 flex items-center justify-center text-muted-foreground group-hover:bg-white/5">
              <MessageSquare className="w-5 h-5" />
            </div>
            <div className="text-left">
              <div className="text-foreground font-bold">Quote</div>
              <div className="text-xs text-muted-foreground">
                Repost with your own thoughts
              </div>
            </div>
          </button>

          <div className="h-px bg-muted/50 my-2 mx-4"></div>

          <button
            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
            onClick={handleCopyLink}
          >
            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
              {copied ? <Check className="w-5 h-5 text-success" /> : <Link className="w-5 h-5" />}
            </div>
            <div className="text-left">
              <div className="text-foreground font-bold">{copied ? 'Copied!' : 'Copy Link'}</div>
            </div>
          </button>
          <button
            className="w-full flex items-center gap-4 p-4 hover:bg-white/5 rounded-lg transition-colors group"
            onClick={() => {
              addToast('Sent via DM');
              onClose();
            }}
          >
            <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center text-muted-foreground group-hover:text-foreground">
              <Mail className="w-5 h-5" />
            </div>
            <div className="text-left">
              <div className="text-foreground font-bold">
                Send via Direct Message
              </div>
            </div>
          </button>
        </div>
      </div>
    </div>
  );
};